CODEWITHSUNDEEP
javascriptjquery
RicoRos
RicoRos

Reputation: 39

jQuery won't listen for my second click

i'm trying to register the second click on a link, by adding a new class and finding it with jQuery. But it won't change the class after the 1st click.

Hope it makes sense and thank you in advance.

    // Listen for when a.first-choice are being clicked
    $('.first-choice').click(function() {

        // Remove the class and another one
        $(this).removeClass('first-choice').addClass('one-choice-made');

            console.log('First Click');
            // Some code goes here....

        });

        // Make sure the link isn't fireing.
        return false;
    });


    // Listen for when a.one-choice-made are being clicked
    $('.one-choice-made').click(function() {

        // Remove the class and another one
        $(this).removeClass('one-choice-made').addClass('two-choice-made');

            console.log('Second Click');
            // Some code goes here....

        });

        // Make sure the link isn't fireing.
        return false;
    });

Upvotes: 0

Views: 206

Answers (2)

Jeff B
Jeff B

Reputation: 30099

At load, .one-choice-made does not exist, so when you call $('.one-choice-made'), it returns an empty jQuery object, hence the click() handler is not added to anything.

What you want to do is attach the handler to something that will always exist, which will respond to the click event (i.e. a parent/ancestor element). This is what $.on() will do for you when called in a delegated handler syntax (i.e. with a filter selector):

$(document).on('click', '.one-choice-made', function() {
    // my second function
}

In this case, jQuery attaches a special handler to document, which watches for click events that propagate to it from children elements. When it receives a click, jQuery looks at the target of the click and filters it against the selector you provide. If it matches, it calls your function code. This way, you can add new elements with this class at any time, as long as they are children of the elements from the selector(s) you applied .on() to. In this case, we used document, so it will always work with new elements.

You can pare this down to a known permanent parent element to reduce click events, but for simple cases document is fine.

NOTE: In the same way, removing the class first-choice will not have any affect on whether the first click handler is called, because the handler is applied to the element. If you remove the class, the element will still have the handler. You will need to use a delegated handler for that as well:

$(document).on('click', '.first-choice', function() {
    // my first function
}

Demo: http://jsfiddle.net/jtbowden/FxqX9/

Upvotes: 2

j08691
j08691

Reputation: 207861

Since you're changing the class you need to use .on()s syntax for delegated events.

Change:

$('.one-choice-made').click(function() {

to:

$(document).on('click', '.one-choice-made', function() {

Ideally you want to use an element already in the DOM that's closer than document, but document is a decent fallback.

Upvotes: 1

Related Questions