删除.clickable类后,jQuery click()仍然被触发

Question

我有一个点击事件分配给特定类的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类之后,我怎样才能使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!');
});