w3schools first ejemplos delegate child jquery function delegates live

first - jquery find class



No se puede obtener jQuery on() para registrar el contenido agregado dinĂ¡micamente (2)

Hay dos formas de usar .on() , y estás usando el tipo incorrecto.

Puede vincular los manejadores de eventos directamente a los elementos usando $(''selector for elements you want the event handler bound to'').on(''event'', function() {...});

O bien, puede delegar eventos, llamando a .on() en un elemento contenedor que contendrá todos los elementos agregados dinámicamente, como un div o, en el peor de los casos, el elemento <body> . El código se vería así:

<div id="wrapper"> <a href="#" class="link">Test link</a> </div> $(''#wrapper'').on(''click'', ''.link'', function(e) { // code to handle the click event on the link here });

El manejador de eventos es realmente manejado por el elemento <div id="wrapper"> una vez que el evento ha llegado al límite, pero la función solo se llama si el objetivo original coincide con el selector proporcionado. Con este método, puede agregar dinámicamente elementos adicionales con el link clase al div, y la función también se ejecutará cuando se haga clic en ellos.

Soy bastante nuevo en el método on () en jQuery, pero ha llegado el momento de que necesite usarlo.

Tengo dos funciones para hacer clic en botones específicos. Cada función funciona en cualquier elemento originalmente en la página, pero no en cualquier contenido agregado dinámicamente (más de los mismos botones). Entiendo que necesito usar la función on () después de leer otras respuestas aquí y en Google, pero aún tengo problemas. De todos modos, código:

jQuery("ul#THEBUTTONS").on({ click: function(event){ event.preventDefault(); console.log("apaz clicked"); } }, "a.azaz"); jQuery("ul#THEBUTTONS").on({ click: function(event){ event.preventDefault(); console.log("mapaz clicked"); } }, "a.mapaz");

Cualquier ayuda sería inmensamente apreciada, arrancándome el pelo aquí.


.on() tiene esencialmente dos sabores: uno que actúa como .bind() y otro que actúa como .delegate() .

Para su problema, quiere usar la versión delegate . Como referencia, on firmas son así:

// bind $(element-selector).on(event, handler) // delegate $(container-selector).on(event, element-selector, handler)

La mejor manera de ponerse al día con esto es, probablemente, leer sobre el delegate , qué es, cómo se usa y luego aplicarlo a on .