Ejemplo de asignación de manejador de evento por live() - I

Veamos la siguiente demostración del funcionamiento de live(). Tenemos varios elementos:

<div class="verde">Esta capa tiene la clase verde (haz clic)</div>

<div class="verde">Segunda capa donde coloco la clase verde</div>

<div id="noverde">Tercera capa que no es verde</div>

<div class="verde">Otra con clase verde</div>

Sin varias divisiones donde todas menos una tienen la clase "verde". Veamos como puedo asignar un evento de tipo "click"

por medio del método live():

$(".verde").live("click", function(e){

var elem = $(this);

if (elem.html()!="Hiciste clic!!"){

elem.html("Hiciste clic!!");

}else{

elem.html("Hiciste de nuevo clic!!");

}

});

Es un evento que permite cambiar el texto del elemento cuando se pulsa sobre él y lo aplicamos sobre todos los elementos

de la clase "verde".

Ahora tenemos un par de botones para hacer cosas con la página y cambiarla un poco.

<input type=button value="insertar nuevo elemento verde" id="insertarelem">

<input type=button value="Poner la clase verde en el div que no la tiene" id="ponerclaseverde">

Cuando se pulse el primer botón, voy a insertar un nuevo elemento en la página al que le pondremos la clase "verde". Eso lo

consigo con este código:

$("#insertarelem").click(function(e){

var nuevoElemento = $('<div class="verde">Elemento creado e insertado dinamicamente</div>');

nuevoElemento.appendTo($(document.body));

});

Los elementos que se creen al apretar ese botón tendrán la clase verde y por tanto la funcionalidad especificada con el método live() para definir el evento clic. El segundo botón asigna la clase "verde" al elemento DIV del principio, que no la tenía, lo que conseguimos así:

$("#ponerclaseverde").click(function(e){

$("#noverde").addClass("verde");

});

Al asignar esa clase al elemento también se aplicará la funcionalidad definida para el evento click con live(). Esto lo podemos ver en funcionamiento en una página aparte.