使用實時jQuery增加Ajax請求的數量

我有下面的代碼，我使用clone()和live()。代碼正在通過鏈接加載到jQuery UI對話框中。每當我點擊鏈接，它就會進入服務器，並用下面的代碼填充對話框。第一次加載頁面時可以正常工作，但如果關閉對話框並再次單擊鏈接以獲取對話框，則正在發送的Ajax請求數量會增加。使用實時jQuery增加Ajax請求的數量

我第一次發送觸發器的變化我只發送一個請求，我關閉對話框並重新加載它然後觸發更改，它同時發送兩個Ajax請求，第三次同時發送三個請求，等等。

你認爲我的問題在哪裏？

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

來源

2012-06-13 ePezhman

注意，不是解決方法：不要使用'live（）'，而是使用on（）'而不是使用 –

我在Firefox和Chrome中嘗試了您的代碼（請參閱http：// jsfiddle。net/PXhdj /），但它僅爲每個「change」事件發出一個Ajax請求。也許你有其他一些代碼正在進行Ajax調用/導致'change'事件？順便說一句，要在元素上設置樣式，請使用'.css（'display'，'inline'）'而不是'.attr（'style'，...）' –

如上面說，你應該使用.delegate()而不是.live()。

爲了使用delegate所有您需要做的就是指定一個您將要在其中偵聽的父母以及將要在其中操作的選擇器。

試試這個：

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

在這裏你有一個工作jsfiddle，也在這裏是.delegate()功能的鏈接以供參考。

來源

2012-06-23 12:01:32

在這種情況下，您不應該使用live，因爲每次打開對話框時都會「記住」綁定。如果我正確理解您的問題，則應該使用「點擊」而不是「實時」綁定。

來源

2012-06-13 12:39:27 NickGreen

你應該嘗試：

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

});

PS：只用jQuery 1.7+。如果您無法升級：

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

});

來源

2012-06-13 12:41:47 sp00m

如果他們無法升級並使用'.on（） '，他們應該使用'.delegate（）'來代替。 –

因爲我想克隆我的代碼，並且新代碼也響應change（），但是使用剛剛注入的新代碼不會觸發更改，所以我使用了live。我該怎麼辦？謝謝 – ePezhman

無論是事件處理程序直接綁定，無需live()或任何其他代表團的方法，或將代碼移動到外部腳本文件，這樣你就不會在每次Ajax調用加載相同的代碼。使用die()只是對不需要存在並且可以簡單修復的問題的樂隊幫助。

如果離開代碼的地方可以簡單地使用：

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

來源

2012-06-17 05:56:26 charlietfl

或許你可以嘗試：

 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"); 

         } 
        } 
       }); 


     });

來源

2012-06-17 19:01:49

您的服務器代碼是否在底部使用JavaScript進行響應？

如果是這樣，你的問題是每次加載ui對話框時都會執行一次javascript，導致額外的綁定，因此每次執行代碼時都會添加一個額外的請求。

在這種情況下的修復很容易，將javascript代碼移動到正在加載ui對話框的頁面。

來源

2012-06-23 13:32:27 user999305

使用實時jQuery增加Ajax請求的數量

回答

相關問題