Il numero di richieste Ajax aumenta con live jQuery

Question

Ho il codice sotto il quale utilizzo clone() e live(). Il codice viene caricato in una finestra di dialogo dell'interfaccia utente jQuery con un collegamento. Ogni volta che clicco il collegamento, vado al server e compilo il dialogo con il codice sottostante. La prima volta che viene caricata la pagina funziona bene, ma se chiudo la finestra di dialogo e clicco di nuovo sul link per ottenere la finestra di dialogo, il numero di richieste Ajax che sta per essere inviato aumenta.

La prima volta che mando innescare il cambiamento mando solo una richiesta, chiudo la finestra di dialogo e inserirla nuovamente e quindi innescare il cambiamento, inviare due richiesta Ajax allo stesso tempo, la terza volta di tre richiesta allo stesso tempo e presto.

Dove pensi che sia il mio problema?

<input id="TaskId" name="TaskId" type="hidden" value="18" /> 
<div id="MainDiv"> 
    <div id="toClone"> 
     <div style="display: inline;"> 
      <select id="Tasksess"> 
       <option value="">لطفاً کار را انتخاب کنيد</option> 
       <optgroup label="کار های جديد"> 
         <option value="16"style="">q3fe</option> 
         <option value="18"style="">fjhv j</option> 
         <option value="19"style="">wref</option> 
         <option value="25"style="">ff</option> 
       </optgroup> 
       <optgroup label="کار های در دست اقدام"> 
         <option value="13"style="">rr</option> 
         <option value="15"style="">yy</option> 
       </optgroup> 
       <optgroup label="کار های تمام شده"> 
         <option value="14"style="">tt</option> 
         <option value="18"style="">fjhv j</option> 
       </optgroup> 
      </select> 
     </div> 
     <div style="display: inline;"> 
      <select id="Statusess" name="Statusess"><option value="">لطفاً وابستگی را انتخاب کنيد</option> 
<option value="1">پيشنياز</option> 
<option value="2">همنياز</option> 
</select> 
     </div> 
     <div style="display: none;" id="Ok"> 
      ok 
     </div> 
     <div style="display: none;" id="noOk"> 
      تکراری 
     </div> 
     <div id="loadingGif" style="display: none;"> 
      <img src="/Content/Images/ajax-loader/253L.gif" alt=""/> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     var Maindiv = $("#MainDiv"); 
     var toClone = $("#toClone"); 

     //$("#Statusess").each(function() { 
      $("#Statusess").live('change', function() { 
       if ($(this).find(":selected").val() != "") {      
        if ($(this).parent().prev().find(":selected").val() != "") { 
         $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;"); 
         $.ajax({ 
          url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(), 
          type: 'GET', 
          success: function (data, status) { 
           if (data != "0") { 
            $(this).parent().parent().find("#Ok").attr("style", "display: inline;"); 
            $(this).parent().parent().find("#noOk").attr("style", "display: none;"); 
           } 
           else if (data == "0") { 
            $(this).parent().parent().find("#Ok").attr("style", "display: none;"); 
            $(this).parent().parent().find("#noOk").attr("style", "display: inline;"); 
           } 
           var div = $('div:eq(0)', Maindiv).clone(); 
           Maindiv.append(div); 
          } 
         }); 
         $(this).parent().parent().find("#loadingGif").attr("style", "display: none;"); 

        } 
       } 
      }); 
     //}); 

    }); 
</script> 

Answer 1

come detto in precedenza si dovrebbe usare .delegate() invece di .live().

Per utilizzare delegate è sufficiente specificare un genitore in cui si sta ascoltando e un selettore su cui agirà.

Prova questo:

<script> 
$(function(){ 
var Maindiv = $("#MainDiv"); 
var toClone = $("#toClone"); 

$("#MainDiv").delegate('#Statusess','change', function() { 
    if ($(this).find(":selected").val() != "") {      
     if ($(this).parent().prev().find(":selected").val() != "") { 
     $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;"); 
     $.ajax({ 
      url: '/echo/html/', 
      type: 'POST', 
      success: function (data, status) { 
       data = "1"; 
       if (data != "0") { 
        $(this).parent().parent().find("#Ok").attr("style", "display: inline;"); 
        $(this).parent().parent().find("#noOk").attr("style", "display: none;"); 
       } 
       else if (data == "0") { 
        $(this).parent().parent().find("#Ok").attr("style", "display: none;"); 
        $(this).parent().parent().find("#noOk").attr("style", "display: inline;"); 
       } 
       var div = $('div:eq(0)', Maindiv).clone(); 
       Maindiv.append(div); 
      } 
     }); 
     $(this).parent().parent().find("#loadingGif").attr("style", "display: none;"); 

    } 
    } 
}); 
}); 
</script> 

Qui un avere un jsfiddle di lavoro, anche qui è un link per riferimento a .delegate() funzione.

Answer 2

In questo caso non si deve usare vivo perché le associazioni sono 'ricordate' ogni volta che la finestra viene aperta. Se ho capito bene il tuo problema, dovresti usare "click" invece di "live".

Answer 3

Si dovrebbe provare:

$("#Statusess").off('change').on('change', function() { 

}); 

PS: solo con jQuery 1.7+. Se non è possibile eseguire l'aggiornamento:

$("#Statusess").die('change').live('change', function() { 

}); 

Answer 4

O associare il gestore eventi direttamente, senza live() o qualsiasi altro metodo di delega, o spostare il codice in un file di script esterno in modo da non sta caricando lo stesso codice su ogni chiamata ajax . L'utilizzo di die() è semplicemente un aiuto di banda per un problema che non ha bisogno di esistere e può essere risolto semplicemente.

Se lasciando il codice in luogo può semplicemente utilizzare:

$("#Statusess").change(function() {... 

Answer 5

forse si può provare:

 jQuery(function ($) { 

      var Maindiv = $("#MainDiv"); 
      var toClone = $("#toClone"); 

       $("#Statusess").on('change', function() { 
        if ($(this).find(":selected").val() != "") {      
         if ($(this).parent().prev().find(":selected").val() != "") { 
          $(this).parent().parent().find("#loadingGif").css("display", "inline"); 
          $.ajax({ 
           url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(), 
           type: 'GET', 
           success: function (data, status) { 
            if (data != 0) { 
             $(this).parent().parent().find("#Ok").css("display", "inline"); 
             $(this).parent().parent().find("#noOk").css("display", "none"); 
            } 
            else if (data == 0) { 
             $(this).parent().parent().find("#Ok").css("display", "none"); 
             $(this).parent().parent().find("#noOk").css("display", "inline"); 
            } 
            var div = $('div:eq(0)', Maindiv).clone(); 
            Maindiv.append(div); 
            div.empty(); 
           } 
          }); 
          $(this).parent().parent().find("#loadingGif").css("display", "none"); 

         } 
        } 
       }); 


     }); 

Answer 6

Il codice server risponde anche con il javascript in fondo?

In tal caso, il problema è che il javascript viene eseguito una volta ogni volta che viene caricata la finestra di dialogo ui, con conseguente ulteriore vincolo, quindi ogni volta che si esegue il codice, si aggiungerà una richiesta aggiuntiva.

La correzione in questo caso sarebbe stato facile, spostare il codice javascript nella pagina che sta caricando la finestra di interfaccia utente, invece.