Añadir eventos a nuevos elementos del DOM con Jquery

programacionwebmix

¿Quien programando con Jquery no ha tenido alguna vez el problema de añadir uno o más eventos a elementos del DOM cargados dinámicamente? Yo he llegado a hacer verdaderas chapuzas para conseguirlo. En este artículo vamos a ver la manera más sencilla y correcta de conseguirlo con el método de Jquery on(). También veremos un resumen otros métodos relacionados con eventos.

Añadir eventos con el método on() de Jquery

A partir de la versión 1.7 de Jquery con el método .on() podemos añadir un evento a elementos del DOM.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Eventos con Jquery</title>
</head>
<body>
  <ul id="mi_ul">
    <li>Li con evento click</li>
  </ul>
  <script type="text/javascript">
    $( "#mi_ul li" ).on( "click", function() {
      $( "#mi_ul" ).append("<li>Nuevo li SIN evento</li>")
    });
  </script>
</body>
</html>

Ejemplo en vivo

En el ejemplo tenemos un <ul> con un solo <li> dentro. El método .on() en la línea 12 indica que al hacer click en los <li> dentro del elemento con id #mi_ul se añadirá al final de la lista otro <li>(línea 13).

Si probamos el ejemplo vemos que al hacer click al primer <li> se añade otro <li>. Pero, al hacer click a los nuevos elementos ¿que sucede? no ocurre nada ,porqué que no tienen el evento asociado aunque están dentro del <ul> ¿Pero, por qué? porqué el evento click se ha añadido solo a los elementos que había cuando se cargó la página. Los otros elementos son nuevos y por lo tanto, como no existían no se les añadió el evento.

Para solucionar esto, podemos delegar al elemento <ul>(con id #mi_ul) el evento click a sus hijos <li> así:

$( "#mi_ul" ).on( "click", "li" ,function() {
    $( "#mi_ul" ).append("<li>Nuevo li CON evento</li>")
});

Ejemplo en vivo

Si nos fijamos, con el selector $() solo seleccionamos el <ul> , también después del primer parámetro(«click»), hay uno nuevo parámetro «li».

Todo esto lo podríamos traducir a: En #mi_ul cuando se haga click en un li lanzar evento.

A simple vista, parece no haber ninguna diferencia, sin embargo, si la hay, al delegar al <ul> los eventos de <li> Jquery se encargará de añadir el evento a los nuevos elementos <li> dentro suyo. Solo hace falta comprobarlo con el ejemplo en vivo, si hacemos click en los nuevos <li> se producirá el evento añadiendo más <li>.

Otros métodos de Jquery interesantes relacionados con eventos similares a on()

off()

Tiene los mismos parámetros que on() pero en este caso, elimina los eventos indicados.

Para eliminar todos los eventos de todos los <li> del ejemplo anterior bastaría con:

$( "#mi_ul li" ).off();

one()

Interesante método, el cual también tiene exactamente los mismos parámetros que on() y funciona prácticamente igual solo con una diferencia: el evento solo funciona una vez por ejemplo, si el evento asociado con one() es click, y hacemos click sobre el elemento que tiene el evento, el evento se eliminará de este elemento o elementos.

3 respuestas a “Añadir eventos a nuevos elementos del DOM con Jquery”

  2. Anónimo 21/10/2014 / 06:36

    Muchas gracias! estuve buscando horas, y al fin acá está la solución!

    Responder

Deja un comentario