El número de solicitudes Ajax aumenta con live jQuery

Question

Tengo el siguiente código que uso clone() y live(). El código se está cargando en un diálogo de la interfaz de usuario jQuery con un enlace. Cada vez que hago clic en el enlace, va al servidor y completa el cuadro de diálogo con el siguiente código. La primera vez que se carga la página funciona bien, pero si cierro el cuadro de diálogo y vuelvo a hacer clic en el enlace para obtener el diálogo, la cantidad de solicitudes Ajax que se envían aumenta.

La primera vez que envío desencadenar el cambio, envío solo una solicitud, cierro el cuadro de diálogo y lo cargo de nuevo y luego desencadenó el cambio, envía dos solicitudes Ajax al mismo tiempo, la tercera vez tres solicitudes al mismo tiempo y pronto.

¿Dónde crees que está mi 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

como se ha dicho se debe utilizar en lugar de .delegate().live().

Para usar delegate, todo lo que necesita hacer es especificar un padre en el que va a estar escuchando y un selector en el que va a actuar.

Prueba esto:

<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> 

Aquí tienen un jsfiddle de trabajo, también aquí hay un enlace de referencia a .delegate() función.

Answer 2

En este caso, no debe utilizar en vivo porque los enlaces se "recuerdan" cada vez que se abre el cuadro de diálogo. Si entiendo tu problema correctamente, deberías usar 'clic' en lugar de 'en vivo'.

Answer 3

Usted debe tratar:

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

}); 

PS: Sólo con jQuery 1.7+. Si no se puede actualizar:

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

}); 

Answer 4

Cualquiera de unir el controlador de eventos directamente, sin live() o cualquier otro método de delegación, o mover el código de archivo de script externo por lo que no va a cargar el mismo código en cada llamada ajax . Usar die() es simplemente una ayuda de banda para un problema que no necesita existir y que se puede solucionar de manera simple.

Si no puede salir del código en su lugar puede utilizar simplemente:

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

Answer 5

tal vez usted puede probar:

 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

¿Su código de servidor responde con el javascript en la parte inferior también?

Si es así, su problema es que javascript se ejecuta una vez por cada vez que se carga el diálogo ui, lo que resulta en un enlace adicional, por lo tanto, cada vez que ejecute su código, agregará una solicitud adicional.

La solución en este caso sería fácil, mueva el código javascript a la página que está cargando el diálogo ui en su lugar.