changing classes and adding click event

Question

I am changing my current class on the first click event and then I would like the class it was replaced with to have its own click event. Here is my current attempt:

$(".originalButton").on("click", function(){
  // THIS WORKS, it changes the class.
  $(this).closest(".questions").find(".originalButton").removeClass("originalButton").addClass("correctButton").off("click");
});

Now right under event handler I added this:

$(".correctButton").on("click", function(){
  debugger;

});

Ideally I would have something else instead of debugger, but at this point the event isn't even firing when the correctButton class button is clicked, even though when I inspect element the class updated properly (from the first click event).

Milind Anantwar · Accepted Answer · 2014-09-10 14:55:09Z

2

You need to use event delegation as you are adding/removing classes dynamically . Use:

$(".questions").on("click",'.correctButton', function(){
   debugger;
});

edited Sep 10, 2014 at 14:55

answered Sep 10, 2014 at 14:47

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Johnny5 Over a year ago

He should bind ".originalButton" with delegation, too. If not, the second time both events will be fired.

Milind Anantwar Over a year ago

@Johnny5: not sure whether OP needs that. also OP is removing the click event when adding newClass

Zafar Over a year ago

not exactly the body tag, he can just use the immediate parent of .correctButton

Milind Anantwar Over a year ago

@Zafarbek: yes...may be element with class questions

Zafar Over a year ago

of course if he have a selector for the parent. but either ways work good.

Collectives™ on Stack Overflow

changing classes and adding click event

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related