Question

我希望这不难理解，我只是个白痴。我有一段我的网络应用程序通过AJAX加载<div>元素中的一些导航。但是，每次用户重新加载页面时，都会增加运行所有绑定JQuery函数的次数！这是性能问题，因为我的一些函数使用.toggle（）方法，因此只有在函数被调用奇数次时它才有效。

我不明白为什么多次设置click事件会导致这种效果。也许它与按钮本身的渲染频率有关，但我不明白，因为每次都会覆盖<div>的内容。

我不知道这是否重要，但我正在为此应用使用Laravel 5.2框架。

非常感谢任何协助。

/**
* FUNCTION FOR REVEALING AND LOADING OR HIDING THE FORM FOR ASSIGNING PREDEFINED
* SOURCES TO SURVEY PRODUCTS.
*/
function myDelSource()
{
  console.log('myDelSource called to assign function to #delSource buttons');
  $("div.myoutput").on("click",".delSource",function(){
    var source_id = this.id;
    console.log('ID passed to DelYes button: ' + source_id);
    $("#delYes").val(source_id);
  });
}
function inlineAJAX ()
{
  console.log('inline AJAX called');
  $("body").on('click','.inlineAJAX',function(e){
    e.preventDefault();
    console.log('InlineAJAX triggered');
    var tag=$(this).attr('tag');
    var url=$(this).attr('url');
    var em = $(tag).find('div');
    var emTag= '#' + em.attr('id');
    if (em.html().length<1)
    {
      loadComponent(url,emTag);
    }
    $(tag).toggle();
  });

}
function delYes(url)
{
  $("#delYes").attr('url',url);
  console.log("delYes function called, the following url was passed: " + url);

  $("body").on("click","#delYes",function(e){
    e.preventDefault();
    console.log('delYes action triggered');
    var sps_id=$("#delYes").val();
    deleteSPS(sps_id);
    myurl=$("#delYes").attr('url');
    loadComponent(myurl,"#surveys");
  });
}
function b100()
{
  $("body").on('click',".100",function(e){
    e.preventDefault();
    var mytag="#"+this.val();
    $(mytag).val(100);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(init);
  function init()
  {
    myDelSource();
    inlineAJAX();
    b100();
    delYes("/survey/{{$survey->id}}/products");
  }
</script>

Answer 1

这个答案是基于一种防御性编码方法。如果您的用户真的正在重新加载页面，那么问题绝对不应该如您所建议的那样发生。但是，我们假设由于您无法控制的情况，某些冗余事件处理程序正在设置中。

在您的情况下，接近它的一种实用方法似乎是让您的处理程序设置函数在设置新处理程序之前删除旧处理程序。在jQuery中，您可以使用

之类的代码执行此操作

$(whatever).off('click','.inlineAJAX');

或类似的。文档页面http://api.jquery.com/off/讨论了或多或少有选择地删除处理程序的各种选项。你甚至可以选择只做：

$(whatever).off('click');

此类代码可能出现在每个设置功能的开头。

Answer 2

我在编写的代码中遇到了类似的问题，我找不到任何合理的理由来存在两个绑定，但是，某些按钮显然会激活两次，无论如何。所以我最终在绑定之前添加了这个，这类似于Cris P.回答：

jQuery( "#buttonId" ).unbind( "click" );

只需阅读off()与unbind()的内容，看来unbind()已被弃用。看起来我有一些代码要更新！

每次加载AJAX页面时都会调用jQuery绑定函数

2 个答案: