Introducción
En ocasiones nos puede interesar enlazar un evento, por ejemplo el click, a una clase. Si utilizamos la función click, si añadimos nuevos elementos de ess tipo, veremos que no dispara el evento que hemos defino. Por suerte la solución es sencilla.
En esta entrada vamos a ver como configurar los eventos para que si se añade un elemento nuevo del tipo que se esta tratando no tengamos que realizar nada mas y funcionen los eventos con los nuevos elementos añadidos.
Ejemplo con Click
Primero vamos a ver el caso general que nos causa problemas y queremos corregir:<body>
<body>
<p id="btn">Botón</p>
<div id="container">
<p class="texto">Texto añadido pulsame</p>
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function(){
var i = 0;
$("#btn").click(
function (){
var p = $('<p class="texto">Texto añadido desde boton. Parrafo'+ (++i) +'</p>')
$("#container").append( p );
});
$(".texto").click(function(){ alert( $(this).text() ); });
});
</script>
</body>
Vemos que cuando pulsamos sobre el elemento que ya estaba añadido funciona nuestro click. El problema es si pulsamos el botón para añadir un nuevo párrafo y pulsamos sobre este vemos que no funciona el click
Solución
La solución pasa por utilizar la función on, disponible desde jQuery 1.7, donde podemos indicar un selector, en este caso .texto que son los tipos de elementos que queremos tratar.
<body>
<p id="btn">Botón</p>
<div id="container">
<p class="texto">Texto añadido pulsame</p>
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function(){
var i = 0;
$("#btn").click(
function (){
var p = $('<p class="texto">Texto añadido desde boton. Parrafo'+ (++i) +'</p>')
$("#container").append( p );
});
$("#container").on("click",".texto", function(){ alert( $(this).text() ); });
});
</script>
</body>
4 comentarios:
gracias!
funciona perfecto!
Hola, quisiera ver si me pueden ayudar, mi problema es el siguiente:
Tengo un div#mdl que coloco desde el HTML, un elemento estático.
Después por medio de un evento jquery click en un enlace, me rellena el div con cierta información entre esta, se encuentra un botón #btnCancel, no me está funcionando con el siguiente código para el evento:
$('#mdl').on('click', 'btnCancel', function(){
//resto de código.
});
Saben porque podría ser? :(
muchas gracias me sirvio de mucho.. era lo que estaba buscando
Publicar un comentario