删除.clickable类后，jQuery click()仍在触发
删除.clickable类后，jQuery click()仍在触发
提问于 2012-08-16 17:16:07
我已经将一个click事件分配给了一个特定类的div。当单击发生时，类将从div中删除。但是，您仍然可以单击该div并触发click()事件(即使该类已被删除)。下面是一个例子：
HTML：
<div class="clickable">
<p>Click me</p>
</div>JavaScript/jQuery:
$('.clickable').click(function() {
$(this).removeClass('clickable');
$(this).addClass('not-clickable');
alert('Clicked!');
});我可以看到类被移除和添加(因为文本的颜色根据我的CSS而改变)。但是，您仍然可以多次单击该div，alert()仍然会出现。
这似乎也是反向发生的；因此，如果我将clickable类添加到div中，$('.clickable').click(function() {...});中的代码将不会运行(但从视觉上看，div会根据新的样式发生变化)。
如何才能使单击事件与类匹配，即使在jQuery添加/删除clickable类之后也是如此？
回答 7
Stack Overflow用户
回答已采纳
发布于 2012-08-16 17:20:47
当您将事件处理程序附加到DOM元素时，它保持不变。该类只是引用元素的一种方法，更改类不会解除绑定事件处理程序，因此您必须手动解除绑定处理程序，如果使用jQuery 1.7+ on()和off()是可行的方法：
$('.clickable').on('click', function() {
$(this).removeClass('clickable').addClass('not-clickable').off('click');
});这将使元素只能单击一次，您可以只使用内置的one()函数，因为这将在第一次单击后自动解除绑定处理程序：
$('.clickable').one('click', function() {
$(this).removeClass('clickable').addClass('not-clickable');
});Stack Overflow用户
发布于 2012-08-16 17:26:58
你可以使用这个
$(document.body).delegate('.clickable', 'click', function(e){
$(this).removeClass('clickable');
alert('Clicked!');
});从jQuery 1.7版开始，delegate()已被on()取代
$(document.body).on('click', '.clickable', function(e){
$(this).removeClass('clickable');
alert('Clicked!');
});或
$('.clickable').on('click', function(e){
$(this).removeClass('clickable').off('click');
alert('Clicked!');
});您也可以使用方法one() -它与bind相同，但只出现一次
$('.clickable').one('click', function(e){
alert('Clicked!');
});Stack Overflow用户
发布于 2012-08-16 17:20:11
$(document).on('click', '.clickable', function() {
$(this).removeClass('clickable');
$(this).addClass('not-clickable');
alert('Clicked!');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11984067
复制相关文章
相似问题