Anzahl der Ajax-Anfragen steigt mit Live-jQuery

Question

Ich habe den Code, unter dem ich clone() und live() verwenden. Der Code wird in einem jQuery UI-Dialogfeld mit einer Verknüpfung geladen. Immer wenn ich auf den Link klicke, gehe ich zum Server und fülle den Dialog mit dem unten stehenden Code. Die erste Zeitseite wird geladen, es funktioniert gut, aber wenn ich den Dialog schließe und den Link erneut klicke, um den Dialog zu erhalten, erhöht sich die Anzahl der Ajax-Anfragen, die gesendet werden.

Das erste Mal, wenn ich die Änderung trigger ich nur eine Anfrage senden, schließe ich den Dialog und lade es erneut und dann die Änderung auslösen, es senden zwei Ajax Anfrage zur gleichen Zeit, das dritte Mal drei Anfrage gleichzeitig und bald.

Wo meinst du mein Problem?

<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

wie oben angegeben Sie .delegate() statt .live() verwenden sollten.

Um delegate zu verwenden, müssen Sie nur einen Elternteil angeben, in dem Sie sich gerade befinden, und einen Selektor, auf den Sie reagieren wollen.

Versuchen Sie folgendes:

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

hier ein Sie eine funktionierende jsfiddle haben, hier auch einen Link zum Verweis auf .delegate() Funktion ist.

Answer 2

In diesem Fall sollten Sie nicht live verwenden, da die Bindungen jedes Mal, wenn der Dialog geöffnet wird, "erinnert" werden. Wenn ich Ihr Problem richtig verstanden habe, sollten Sie 'click' statt 'live' binding verwenden.

Answer 3

sollten Sie versuchen:

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

}); 

PS: nur mit jQuery 1.7+. Wenn Sie nicht aktualisieren können:

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

}); 

Answer 4

Entweder die Ereignisbehandlungsroutine direkt binden, ohne live() oder jede anderen Delegierungsmethode oder den Code zu externer Skriptdatei verschieben, so dass Sie nicht den gleichen Code auf jeden Ajax-Aufruf geladen . Die Verwendung von ist einfach eine Bandhilfe für ein Problem, das nicht existieren muss und einfach behoben werden kann.

Wenn Sie den Code in Ort verlassen einfach verwenden können:

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

Answer 5

Vielleicht können Sie versuchen:

 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

Reagiert Ihr Servercode auch mit dem Javascript unten?

Wenn ja, Ihr Problem ist, dass das Javascript einmal für jedes Mal ausgeführt wird, wenn der ui-Dialog geladen wird, was zu einer zusätzlichen Bindung führt, sodass Sie jedes Mal, wenn Sie Ihren Code ausführen, eine zusätzliche Anfrage hinzufügen.

Die Lösung in diesem Fall wäre einfach, bewegen Sie den JavaScript-Code auf die Seite, die stattdessen den ui-Dialog lädt.