Question

我正在使用jQuery的“.on”将点击甚至附加到“更多项目”按钮。由于我们的脚本处理方式，此事件可能会多次重新附加。

我希望在单击此按钮时阻止触发多个事件。我实际上是将事件附加到“文档”并使用选择器来定位按钮。再次，这是因为重载和ajax调用我将事件保存在“文档”上，所以它永远不会丢失。

以下是我的代码：

  // Removes previous events 
  $(document).off('click','.moreItems');

 // Attached new event
  $(document).on('click','.moreItems', function(event) {
    ... do stuff ....
  });

我已经搜索了堆栈的voerflow以获得答案，但没有任何帮助。所有内容都谈到从初始对象中删除事件（本例中为“文档”），但从不使用选择器（我可以找到）。

谢谢！

Answer 1

如果您保留对回调函数的引用，则可以使用.off()删除它的所有实例：

var callback = function(){console.log('callback executed');};

jQuery('.moreItems').on('click',callback);
jQuery('.moreItems').on('click',callback);

jQuery('.moreItems').off('click',callback);

Fiddle

Answer 2

我不明白你的问题。

$(document).on('click','.moreItems', function(event) {
   ... do stuff ....
});

您将click事件委托给document。如果使用类'moreItems'动态添加元素，则click事件已自动绑定。

请参阅官方文档：http://api.jquery.com/on/

永远不要这样做：

首先取消绑定，然后绑定
在同一元素上进行多重绑定

Answer 3

我将使用unbind和bind来代替off和on旁边我认为它们是同一个函数的别名，也将事件追加到对象，而不是文档本身，但这应该是可选的。

$('.moreItems').unbind('click').bind('click', function(event) {
   //Your code
});

当您仅使用事件类型作为参数调用unbind时，它将删除该事件的所有处理程序，我想这也是您想要的。

删除“.on”使用'选择器单击jQuery中的事件;

3 个答案: