0

我在 Wordpress 3.6.1 中使用 jQuery 1.10.2。

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

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

我尝试了以下代码，但即使使用 Inspect Element，我看到不再有“未点击”类的区域，变量也会不断增加。

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

任何想法为什么这不起作用？

4

2 回答 2

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，这将检查每次元素是否匹配条件（在上述情况下是它具有类.unclicked）

于 2013-11-07T14:25:46.547 回答
0

除了ahren的回答之外，还有其他一些（我认为更好）的方法可以做到这一点。

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

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

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

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

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

于 2013-11-07T14:30:42.880 回答