Question

I have some jQuery code something like this:

$(document).ready(function() {
    $("img.off").click(function() {
        alert('on');
       $(this).attr('class', 'on'); 
    });
    $("img.on").click(function() {
        alert('off');
        $(this).attr('class', 'off'); 
    });
});

The selector works fine for images that have the class name defined in the original HTML document, however after manipulating the class name with jQuery, the img item will not respond to selectors using it’s new class.

In other words, running the above code, if you click an ‘off‘ img, it will trigger the first function, and change the class to ‘on‘. However, clicking this image again does not trigger the second function (as I would have expected), but rather triggers the first again. It’s as if the selector is reading the old DOM rather than the updated version. What am I doing wrong here?

Firefox 3.6.3 – jQuery 1.4.2

Answer 1

You can use .live() to do what you want, like this:

$(function() {
  $("img.off").live('click', function() {
    alert('on');
    $(this).attr('class', 'on'); 
  });
  $("img.on").live('click', function() {
    alert('off');
    $(this).attr('class', 'off'); 
  });
});

When you do $(selector).click() you’re finding the elements that match at that time and binding a handler to the click event…when their class changes later it doesn’t matter for this, the handler is attached. .live() works differently, actually caring about the selector matching when the event happens.

Also, depending on your example/what you’re ultimately after, something like .toggleClass() might simplify it for you, like this:

$(function() {
  $("img.off, img.on").live('click', function() {
    $(this).toggleClass('on off'); 
    alert($(this).attr('class'));
  });
});