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

Answer 1

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
});