jquery: on vs click

jQuery y las escuchas contra elementos inexistentes

Veronica Holland

archivado en: JavaScript / 26 Septiembre, 2015

Buf, antes que nada pido disculpas a los lectores habituales del blog por haberlo dejado medio desantedido durante estas semanas, pero encadené unas vacaciones en Galicia con un par de semanas de curro tremendas y no he tenido ni medio segundo libre. Pero aparquemos los lloriqueos habituales y vamos con temas más entretenidos.

Estos días atrás estuve en Palma de Mallorca dando un par de charlas sobre javaScript en Viajes Barceló. Aparte de que la ciudad me chifla, fueron muy divertidas e interesantes y en una de ellas surgió un tema de jQuery que suele llevar a confusión cuando se comienza a trabajar con esta librería: la diferencia entre definir un evento directamente o definirlo con el método on. Es decir, entre hacerlo así:

$('#miElemento').click(function() { ... });

o así:

$('#miElemento').on('click', function() { ... });

¿Cuándo debemos hacerlo de una manera y cuándo de otra?

La respuesta es muy sencilla: todo depende del momento en que se haya incluido en el DOM el elemento sobre el que queremos lanzar la escucha. Si ya está en el DOM cuando lo bindeamos, podemos hacerlo de la manera corta: $('#miElemento').click... Sin embargo, si se incluye después, por ejemplo como resultado de una llamada ajax, este sistema no sirve, pues no se puede enganchar una escucha sobre algo que aún no existe.

Por ejemplo, si tenemos este html:

<ul id="js-miLista">

<li>foo</foo>

<li>bar</foo>

Y lanzamos este script:

$("#js-otroElemento").click(function() {

alert("Awesome!");

});

$("#js-miElemento").append("<li id='js-otroElemento'>Haga Basin</li>");

La escucha, el click, contra js-otroElemento no va a funcionar, puesto que se lanza antes de que ese elemento exista en el DOM.

La solución más sencilla es cambiar el orden y anteponer la inserción...

$("#js-miElemento").append("<li id='js-otroElemento'>Haga Basin</li>");

$("#js-otroElemento").click(function() {

alert("Awesome!");

});

Sin embargo, en la vida real el trabajo con elementos dinámicos no es tan sencillo y si confiamos todo al orden de las sentencias, el desastre está garantizado. En cambio, para estos casos contamos con la construcción de las escuchas mediante el on, con el que podemos engarzar la escucha a un contenedor superior que sí se encuentre en el DOM en el momento de lanzarla. En el ejemplo anterior:

$("#js-miLista").on('click', '#js-otroElemento', function() {

alert("Awesome!");

});

$("#js-miElemento").append("<li id='js-otroElemento'>Haga Basin</li>");

Bueno, en realidad lo más limpio en estos casos es tener todo organizado en objetos y métodos que permitan unbindear y rebindear sin miedo a doble bindear las cosas, pero de esto hablaré otro día.

|| Tags: ,

valoración de los lectores sobre jquery: on vs click

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*