javascript - jQuery .not() 没有从函数中过滤元素 - 想法？

Question

我正在尝试创建一个在 Ajax POST 成功后禁用投票按钮的功能。投票按钮在 POST 完成之前一直启用，然后用“禁用”样式修复并且不可单击。我正在尝试使用 jQuery .not() 来禁用从单击的按钮启动该功能(使用“禁用”类)，但我运气不佳。 Here's a fiddle of my function so you can see my problem,我不确定我错过了什么，但我希望有人能帮助我找到我的错误，这让我很沮丧:)

jQuery 代码:

$("a.votebutton").not(".disabled").each(function(index) {
  var el = $(this);
  $(this).click(function() {
      el.addClass("active disabled").unbind("click");
      el.siblings().addClass("disabled");
  });
});

​

Answer 1

问题是你的代码:

$("a.votebutton").not(".disabled")

选择在该行代码运行时未禁用的所有链接，然后循环分配点击处理程序。这些单击处理程序仍然绑定(bind)到这些链接，即使它们稍后恰好被赋予“禁用”类 - 因此，当您将“禁用”类添加到被单击元素的同级元素时，这些同级元素仍然具有有效的单击处理程序。如果您取消绑定(bind)同级的点击，应该修复它:

// change
el.siblings().addClass("disabled");
// to be
el.siblings().addClass("disabled").unbind("click");

请注意，您不需要 .each() :

$("a.votebutton").not(".disabled").click(function() {
      $(this).addClass("active disabled").unbind("click")
             .siblings().addClass("disabled").unbind("click");
});

另一种方法是使用委托(delegate)事件处理:

$("div.panel").on("click", "a.votebutton:not(.disabled)", function() {
   $(this).addClass("active disabled")
          .siblings().addClass("disabled");
});

这样，只有当点击冒泡到包含的 div(“div.panel”)时，才会处理点击，此时，只有当事件的源元素与作为第二个参数 .on() 的选择器匹配时，您的点击处理程序才会运行.

更新的演示:http://jsfiddle.net/RSezp/2/