jquery防止分配重复功能

Posted 2023-02-19

【中文标题】jquery防止分配重复功能

【英文标题】：jquery prevent duplicate function assigned

【发布时间】：2010-12-06 05:08:51

【问题描述】：

如果我需要动态分配点击功能，有没有办法确保点击功能只分配一次，不重复？

this.click(function()
    alert('test');
)

【参考方案1】：

您可以在再次绑定之前取消绑定点击事件，这样您将只附加一个事件：

//assuming this is a jquery object.
this.unbind("click");
this.click(function()
  alert("clicked once");
);

从 jQuery 1.7 开始，click 现在使用 .on (http://api.jquery.com/click/)，所以现在是正确的代码

//assuming this is a jquery object.
this.off("click");
this.click(function()
  alert("clicked once");
);

这将取消绑定所有点击事件（包括由您可能正在使用的任何插件创建的点击事件）。为确保您只取消绑定事件，请使用命名空间。 (http://api.jquery.com/off/)

//assuming this is a jquery object.
this.off("click.myApp");
this.on("click.myApp", function()
  alert("clicked once");
);

这里 myApp 是命名空间。

【讨论】：

完美，正是我想要的。谢谢！

谢谢，这完成了工作。但是在这种情况下我需要解决这个问题，这是否意味着我的设计存在问题？或者这是使用 Ajax 操作 DOM 时总是发生的正常问题？

【参考方案2】：

使用 jQuery .on() 你可以这样做：

//removes all binding to click for the namespace "myNamespace"
$(document).off('click.myNamespace'); 

$(document).on('click.myNamespace', '.selector', function(event) ...); 

//this will be also removed (same namespace)
$(document).on('click.myNamespace', '.anotherSelector', function(event) ...); 

【讨论】：

感谢您的回答，sieppl。刚刚检查了 jQuery 文档，它指出：As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate(). 我的结论：在大多数情况下，它比 .bind()

@esco_：是的，我完全切换到了 on()。虽然我从未使用过 bind()，但停止使用 live() 和 delegate()。

【参考方案3】：

我想补充一下 Marius 的答案--

在避免重复绑定时，如果应该有多个函数绑定到一个事件，您不希望意外解除绑定。当您与多个开发人员一起工作时，这一点尤其重要。为了防止这种情况，您可以使用事件命名空间：

//assuming this is a jquery object.
var alertEvent = 'click.alert'
this.unbind(alertEvent).bind(alertEvent,function()
  alert('clicked once');
);

这里的 'alert' 是单击事件的命名空间的名称，只有与该命名空间绑定的函数才会解除绑定。

【参考方案4】：

假设元素被添加到 html 并且您只想为添加的元素添加事件：

function addEvents2Elements()//prevent Duplicate

    //this will add the event to all elements of class="ele2addevent"
    $('.ele2addevent').not('.clickbind').on('click',function()alert('once');)

    //this will add a class an then the class="ele2addevent clickbind"
    $('.ele2addevent').not('.clickbind').addClass('.clickbind');
    //all elements of class="... clickbind" will not be catched anymore in the first line because of .not() every time you call this function

addEvents2Elements();

请务必仅使用 class="ele2addevent" 添加，因为绑定后它将是 class="ele2addevent clickbind" 并且不会再次捕获...

【参考方案5】：

这对我有用！

$('.element').on('click', function (event) 
    if(event.isDefaultPrevented()) return;
    event.preventDefault();

    // do something