javascript - 如何使 jQuery `bind` 或 `on` 事件处理程序具有幂等性

Question

有没有一种我可以调用$(selector).bind('click', handler)或$(selector).on('click', handler)多次调用的方法，以便处理程序只附加一次？

现在，我有多个具有不同成功回调的 AJAX 处理程序，每个处理程序都会在页面上重新呈现一组不同的元素。理想情况下，我想将“重新附加事件”例程重构为单个函数，而不是所有人的例程。

我现在能想到的唯一方法是显式取消绑定，例如：

$(selector).off('click');
$(selector).on('click', handler);

寻找一种自动执行类似操作的方法。

score 5 · Accepted Answer

更好的方法是将.on调用移至容器。如果您有一个容器，则该容器会.on保留并应用于与您的选择器匹配的任何现有或新子项：

$(container-selector).on("click", "element-selector", function(event){
// do stuff
});

干杯。

score 4 · Accepted Answer

您可以命名您的事件处理程序，然后确保在绑定之前取消绑定：

$('#something').unbind("click.some-feature").bind("click.some-feature", function() { ... });

您可以编写自己的 jQuery 函数来自动执行此操作：

$.fn.schneiderBind = function(name, fn) {
  return this.unbind(name).bind(name, fn);
});

$('#something').schneiderBind("click", function() { ... });

或者，您可以使用冒泡和委托在 DOM 中绑定更高的位置，从而不受动态更新的影响。

score -1 · Accepted Answer

$(document).on("click","selector", function() {  code goes here... });

这将适用于动态添加的对象

3 回答 3