jQuery 会覆盖事件监听器吗？答案

【问题标题】：Does jQuery overwrite event listeners?jQuery 会覆盖事件监听器吗？
【发布时间】：2012-07-11 10:46:49
【问题描述】：

我有一堆 div，每个 div 都包含一个带有以下点击事件的删除链接：

  var observeRemoveRoom = function
    $('.remove_room').click(function(){     
      $(this).parent().removeClass('active');
    });
  }

单击它会删除父级（div）的“活动”类。我在窗口加载时调用此 observeRemoveRoom 函数，它工作正常。

问题是，我有另一个函数可以添加更多相同的 div。由于新 div 中包含的 a.remove_room 链接不在 window.load 上，我需要致电 observeRemoveRoom。

我是否以某种方式复制了事件处理程序？ jQuery 会覆盖它们吗？如果是这样，我应该取消绑定处理程序吗？

【问题讨论】：

标签： javascript jquery jquery-events jquery-click-event

【解决方案1】：

每次调用observeRemoveRoom jQuery 都会为单击事件添加一个新的唯一事件处理函数。

所以是的，您需要通过不带参数调用.unbind() 来.unbind() 所有当前绑定的处理程序，或者具体并传入函数引用。

【讨论】：

【解决方案2】：

您可以尝试实时查询以保持更新：http://docs.jquery.com/Plugins/livequery

【讨论】：

咦，那个插件是什么？只需将 on() 与选择器一起使用。
on() 只会在您调用它时将事件附加到查询结果中。实时查询在 DOM 更改时添加/删除事件。
不，不是在 DOM 更改时而是在调用 jQuery 方法时。呃。最好使用delegated events。

【解决方案3】：

是的，如果您再次调用observeRemoveRoom，您将复制事件处理程序，但这可能不会引起注意，因为您只是调用removeClass 方法，如果找不到该类，该方法将不执行任何操作，即第一个监听器触发后的情况。

相反，您可以每次取消绑定并重新绑定点击事件，例如：

 var observeRemoveRoom = function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    $('.remove_room').off('click', remove_class).on('click', remove_class);
  }

不过话虽如此，还是建议你在这个函数之外做这件事，而不是每次都绑定和解除绑定事件，比如：

$(document).ready(function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    // If the element exists at dom ready, you can bind the event directly
    $('.remove_room').on("click", remove_class);
    // If the element is added in dynamically, you can [delegate][1] the event
    $('body').on("click", '.remove_room', remove_class);
    // Note: Although I've delegated the event to the body tag in this case
    // I recommend that you use the closest available parent instead
});

http://api.jquery.com/on/#direct-and-delegated-events：[1]

【讨论】：