Using jQuery to control click events by adding/removing classes

Question

I currently have something like this code running:

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
   //more stuff here
    jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

This is bad because the click events propagate, every click that occurs adds the click event multiple times. I tried closing off the first selector (like so) and having the click events seperately but the second click event never occurred(!):

function blah() {
jQuery(".class1").on("click", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(".class2").on("click", function() {
           jQuery(this).removeClass("class1");
           //More stuff here

How do I structure code so that on the first click one thing happens, and the second click another thing happens without click events doubling

I kind of feel like you are trying to get help fixing a hack rather than the original problem you were having. Could you explain exactly what you are trying to do? That way we can actually provide better answers for you. Also, if you could provide a [fiddle](jsfiddle.net) demonstrating your issue - that would be helpful. — Smern
– Smern, Commented Aug 19, 2013 at 0:44
This is correct, I will provide a detailed explanation in the morning. I want to get better at this. — Joseph
– Joseph, Commented Aug 19, 2013 at 1:07

Arun P Johny · Accepted Answer · 2013-08-19 00:34:56Z

1

you need

jQuery(document).on("click", ".class1", function() {
    jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(document).on("click", ".class2", function() {
           jQuery(this).removeClass("class1");
           //More stuff here
});

Demo: Fiddle

edited Aug 19, 2013 at 0:34

answered Aug 19, 2013 at 0:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Collectives™ on Stack Overflow

Using jQuery to control click events by adding/removing classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related