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!');
});

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()

使用“.clickable”类

元素

将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!');
});

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

7 个答案: