JS/Jquery: Click Event After AddClass

Question

Say I want to change a container's class when the image it contains is loaded, probably something like this:

$('.image').load(function(){
    $(this).parents('.image-wrapper').removeClass('image-wrapper').addClass('image-wrapper-new');
});

…And then add a click event, referencing the newly-added class, like this:

$('.image-wrapper-new').click(function(){
    //Do stuff
});

I've tried something similar to this, with no success. Am I missing something?

Using Developer Tools, it appears that the browser is rendering it as .image-wrapper-new, but since it retains the .image-wrapper class in the physical code, Jquery/JS doesn't honor it. Is that possible?

Thanks.

-Ryan

Your JS is syntactically invalid - you're missing a closing single quote. Is that what your actual code looks like, or did you just type it into the question incorrectly? — Matt Ball
– Matt Ball, Commented Feb 22, 2011 at 15:49
Oops, you're right about the single quote. This is not my actual code, but this is identical to what I was trying to do. Is there another way to do it? — Rrryyyaaannn
– Rrryyyaaannn, Commented Feb 22, 2011 at 15:52

Matt Ball · Accepted Answer · 2013-02-12 02:06:59Z

4

To fix the syntax error:

$('.image').load(function(){
    $(this).parents('.image-wrapper').removeClass('image-wrapper').addClass('image-wrapper-new');
});

I would also recommend using .on() rather than .click() so you don't have to re-bind event handlers every time you change the class:

$(document).on('click', '.image-wrapper-new', function(){
    //Do stuff
});

edited Feb 12, 2013 at 2:06

answered Feb 22, 2011 at 15:51

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

2 Comments

Rrryyyaaannn Over a year ago

Thanks for mentioning .live. That seems to have done the trick.

Matt Ball Over a year ago

@dvdnhm .live() is deprecated and was removed in jQuery 1.9. You should use .on() instead. I've updated my answer accordingly.

David Houde · Accepted Answer · 2011-02-22 16:05:27Z

1

You should be using .live('click', function() {}); due to the fact that you are updating the DOM. .click() will not pick up on new data automatically. If you are building an ajax application this should be standard imo

answered Feb 22, 2011 at 16:05

David Houde

4,7881 gold badge22 silver badges29 bronze badges

Comments

gor · Accepted Answer · 2011-02-22 15:58:34Z

0

Just add your click event handler in the same function, as you change class:

$('.image').load(function(){
    $(this).parents('.image-wrapper')
           .removeClass('image-wrapper')
           .addClass('image-wrapper-new')
           .click(function(){
               //Do stuff
            });
});

answered Feb 22, 2011 at 15:58

gor

11.7k5 gold badges39 silver badges42 bronze badges

Collectives™ on Stack Overflow

JS/Jquery: Click Event After AddClass

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related