Question

我在Wordpress 3.6.1中使用jQuery 1.10.2。

我有一个包含5个区域的图像地图，每个区域都有“未点击”类。

每当我点击其中一个区域时，我想阻止默认行为，当href属性为“＃”时，将clicksNumber变量增加1并删除元素的“未点击”类，以避免增加clicksNumber变量第一次点击后。

我尝试了以下代码但是变量不断增加，即使使用Inspect Element，我看到没有“unlicked”类的区域。

jQuery('.unclicked').click(function (e) {
    nClicks = nClicks + 1;
    jQuery(this).removeClass('unclicked');
    e.preventDefault();
    alert("CLICK ON UNCLICKED ELEMENT, Elements Clicked" + nClicks);
});

为什么这不起作用？

Answer 1

jQuery('.unclicked').on('click',function(e){
   nClicks = nClicks+1;
   jQuery(this).removeClass('unclicked');
   jQuery(this).off('click');
   e.preventDefault();
   alert("CLICK ON UNCLICKED ELEMENT, Elements Clicked" + nClicks);
});

使用.on()代替.click()，然后您可以使用.off()取消绑定处理程序。

你的问题发生的原因是因为即使你删除了unclicked类，元素本身也有绑定到它们的事件处理程序，无论元素结构如何变化都会保持绑定。

另一种可以在不必解除每个处理程序绑定的情况下完成此操作的方法是将事件委托给最近的静态父元素。

jQuery('#parent').on('click', '.unclicked', function(e){
  // Your code
  // Remove .unclicked class
});

这样可以工作，因为当事件冒泡到#parent时会处理处理程序，这会检查每次元素是否与条件匹配（在上述情况下它是具有类{{1} }}）

Answer 2

除了ahren's answer之外，还有其他一些（我认为更好的）方法。

jQuery提供.one()函数，这将导致事件处理程序“每个事件类型每个元素最多执行一次”，这样可以节省您自己显式删除事件处理程序的时间。这看起来像这样：

jQuery('.unclicked').one('click', function(e) {
    // your code
});

但是，使用事件委派可能更好：

jQuery(document).on('click', '.unclicked', function(e) {
    // your code
});

这将识别文档中任何.unclicked元素的点击（所有这些）;但是，如果从中删除unclicked类，则如果再次单击它，则不会为它执行事件处理程序。这条路线的优点是，如果你想重置一些东西，你只需要将unclicked类添加回正确的元素，你也不必重新绑定事件处理程序。

jQuery - removeClass似乎与变量增加不一致

2 个答案: