jQuery: seleccionar por clase después del cambio de clase por .addClass() o .attr()

Question

Tengo algo de código jQuery algo como esto:

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

El selector funciona bien para las imágenes que tienen el nombre de la clase definida en el documento HTML original, sin embargo, después de manipular el nombre de clase con jQuery, el elemento img no responderá a los selectores que usen su nueva clase.

En otras palabras, ejecutar el código anterior, si hace clic en un img 'off', activará la primera función y cambiará la clase a 'on'. Sin embargo, al hacer clic en esta imagen nuevamente no se activa la segunda función (como yo esperaba), sino que se activa la primera otra vez. Es como si el selector estuviera leyendo el antiguo DOM en lugar de la versión actualizada. ¿Qué estoy haciendo mal aquí?

Firefox 3.6.3 - jQuery 1.4.2

Answer 1

Puede utilizar .live() para hacer lo que quiere, como esto:

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

Al hacer $(selector).click() usted está encontrando los elementos que coinciden en ese momento y vinculando un controlador al evento click ... cuando su clase cambia más tarde no tiene importancia, el controlador está adjunto. .live() funciona de manera diferente, en realidad se preocupa por el selector correspondiente cuando ocurre el evento.

También, dependiendo de su ejemplo,/lo que está en última instancia, después, algo así como .toggleClass() podría simplificarlo para usted, de esta manera:

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

Answer 2

Pruebe con live():

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

Answer 3

Necesita volver a vincular la devolución de llamada después de cambiar la clase, o use .live()