删除.clickable类后仍然会触发jQuery click（）

我有一个click事件分配给特定类的div。 单击发生时，将从div中删除该类。 但是，您仍然可以单击div并触发click()事件（即使该类已被删除）。 这是一个例子：

HTML：

 
 
Click me
  

的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类之后，我怎样才能使click事件与类匹配？

Answer 1

将事件处理程序附加到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'); }); 

Answer 2

你可以用它

 $(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() – 它等于绑定，但只发生一次

 $('.clickable').one('click', function(e){ alert('Clicked!'); }); 

Answer 3

 $(document).on('click', '.clickable', function() { $(this).removeClass('clickable'); $(this).addClass('not-clickable'); alert('Clicked!'); }); 

Answer 4

 $('.clickable').live('click',function() { $(this).removeClass('clickable');//remove the class $(this).unbind('click');//to remove the click event $(this).addClass('not-clickable'); alert('Clicked!'); }); 

Answer 5

取消绑定点击事件 – 比如$(this).unbind('click');' 试试这个

 $('.clickable').click(function() { $(this).removeClass('clickable'); $(this).addClass('not-clickable'); $(this).unbind('click');' }); 

Answer 6

你对甚至任务的理解有点不对劲。 请阅读您的代码

 $('.clickable').click(function() 

1. 查找类“.clickable”的元素
2. 将onclick处理程序分配给元素

看，它是获取处理程序的元素，而不是类名。 您需要删除处理程序。 为此您可以尝试：

 $('.clickable').click(function() { $(this).removeClass('clickable'); $(this).addClass('not-clickable'); alert('Clicked!'); $(this).unbind('click'); }); 

Answer 7

如果你只想调用click事件一次，使用jQuery one函数来绑定事件，它将自行销毁。

 $('.clickable').one('click',function() { $(this).removeClass('clickable');//remove the class $(this).addClass('not-clickable'); alert('Clicked!'); });