Question

I’m trying to create a function that disables voting button after an Ajax POST success. The voting buttons are enabled until POST completes, and then are fixed with ‘disabled’ styling and are in-clickable. I’m trying to use jQuery .not() to disable starting the function from clicked buttons (with the class ‘disabled’) but I’m not having much luck. Here’s a fiddle of my function so you can see my problem, I’m not sure what I’m missing but I’m hoping someone can help me find my error, it’s frustrating me : )

jQuery Code:

$("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

The problem is that your code:

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

selects all of the links that are not disabled at the time that line of code runs, and then you loop through assigning click handlers. These click handlers remain bound to those links even if they happen to be given the “disabled” class at a later time – so when you add the “disabled” class to the clicked element’s siblings those siblings still have a working click handler. If you unbind the click from the siblings that should fix it:

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

Note that you don’t need the .each():

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

Another way to do it would be to use delegated event handling:

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

That way the clicks are only handled once they bubble up to the containing div (“div.panel”), at which time your click handler is only run if the event’s source element matches the selector that is the second parameter to .on().

Updated demo: http://jsfiddle.net/RSezp/2/