使用实时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请求的数量

回答

相关问题