23

我有一个点击事件分配给一个特定类的 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？

4

7 回答 7

31

当您将事件处理程序附加到 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');
});
于 2012-08-16T09:20:47.400 回答
6

你可以用这个

$(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!');
});
于 2012-08-16T09:26:57.507 回答
3 
$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});
于 2012-08-16T09:20:11.360 回答
2 
$('.clickable').live('click',function() {
  $(this).removeClass('clickable');//remove the class
  $(this).unbind('click');//to remove the click event
  $(this).addClass('not-clickable');
  alert('Clicked!');
});
于 2012-08-16T09:23:00.907 回答
0

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

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  $(this).unbind('click');'
});
于 2012-08-16T09:18:56.293 回答
0

您对偶数分配的理解有点错误。请阅读您的代码

$('.clickable').click(function()
  1. 查找具有“.clickable”类的元素
  2. 将 onclick 处理程序分配给元素

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

$('.clickable').click(function() {
    $(this).removeClass('clickable');
    $(this).addClass('not-clickable');
    alert('Clicked!');
    $(this).unbind('click');
});
于 2012-08-16T09:23:06.280 回答
0

如果您只想调用一次单击事件，使用 jQueryone函数绑定事件，它将自行销毁。

$('.clickable').one('click',function() {
   $(this).removeClass('clickable');//remove the class
   $(this).addClass('not-clickable');
   alert('Clicked!');
});
于 2012-08-16T09:29:52.610 回答