jQuery - Add a click handler after addClass

Question

I have added a class to an element when user clicks it:

$('.service-blurb').click(function() {
    $(this).addClass('scrolls');
});

Now I want to add an event handler to the 'scrolls' class so when the user clicks again it scrolls.

$(document).on('click', '.scrolls', function() {
    //scrolls nicely to that service description
});

THE PROBLEM: As soon as I click the first time on the '.service-blurb' element, it not only adds the class but it also scrolls. I want it to scroll only when the user clicks for the second time.

Barmar · Accepted Answer · 2016-11-17 23:46:50Z

4

What's happening is that the event is bubbling out to the document, and then it checks whether you clicked on an element that matches .scroll, so it runs the delegated handler.

Change the first handler so it stops event bubbling.

$('.service-blurb').click(function(e) {
    $(this).addClass('scrolls');
    e.stopPropagation();
});

answered Nov 17, 2016 at 23:46

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

George Katsanos Over a year ago

could he also change his second click handler so that it's not attached to the 'document' but to element with the class '.scrolls' instead?

Barmar Over a year ago

@GeorgeKatsanos No, because he's adding the scrolls class dynamically, so he has to use delegation. So the element won't have the class when he binds the click handler.

Yona Appletree · Accepted Answer · 2016-11-17 23:40:58Z

0

It seems you may not want to add the handler until the first click?

$('.service-blurb').click(function() {
    $(this).addClass('scrolls');
    $(this).off('click'); // Disable this handler now that we're done

    $(document).on('click', '.scrolls', function() {
        //scrolls nicely to that service description
    });
});

answered Nov 17, 2016 at 23:40

Yona Appletree

9,1927 gold badges38 silver badges54 bronze badges

1 Comment

Juan Bonnett Over a year ago

It's still triggering the second click automatically :/

Rafail Antoniadis · Accepted Answer · 2016-11-29 13:17:11Z

0

If I understood right, you need event.preventDefault().

$('.service-blurb').click(function(e) {
    $(this).addClass('scrolls');
    e.preventDefault;
});

For more... check here... https://api.jquery.com/event.preventdefault/

edited Nov 29, 2016 at 13:17

answered Nov 17, 2016 at 23:56

Rafail Antoniadis

1221 silver badge12 bronze badges

Collectives™ on Stack Overflow

jQuery - Add a click handler after addClass

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related