No se puede obtener jQuery on() para registrar contenido agregado dinámicamente

Soy bastante nuevo en el método on() en jQuery, pero ha llegado el momento de necesitarlo.No se puede obtener jQuery on() para registrar contenido agregado dinámicamente

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 muy apreciada, arrancándome el pelo aquí.

Fuente

2012-03-14 tristyb

¿El elemento '# THEBUTTONS' es un antecesor de los elementos dinámicos' '? –

Entonces, ¿el elemento #THEBUTTONS es un antecesor estático de los elementos '' añadidos dinámicamente? ¿Estás seguro de que es "a.azaz" y no "a.apaz"? Pruebe '.on ('clic', 'a.azaz', función (evento) {...})' en su lugar ... más personas están acostumbradas a este estilo de invocación – devnull69

su código funciona para mí: http: // jsfiddle .net/tSUg7 /, ¿tal vez es el html? –

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

Para su problema, desea utilizar 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 esta es probablemente to read up on delegate, lo que es, cómo su usa, y luego aplicarlo a on.

Fuente

2012-03-14 09:24:39

Gracias por la respuesta. De nuevo, esto (y, por lo tanto, lo que sugirió @Anthony Grist) solo sirve para hacer que los elementos originales se puedan hacer clic. Si es de alguna ayuda, estoy tomando el elemento de otro lado con el método .html() y volviéndolo a insertar en otro lugar. – tristyb

Es interesante si el selector de contenedores va más allá del contenido que he añadido dinámicamente, por lo que incluso, body, simplemente deja de funcionar. – tristyb

Si solo está utilizando el código HTML, los manejadores de eventos que ha adjuntado a esos elementos no se transfieren con él. Mejor sería usar '$(). Clone (true, true)' en su lugar, o para golpear los nuevos elementos dentro de un contenedor donde ha asignado el comando 'delegate'. –

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

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

O bien, puede delegar eventos, llamando .on() en un elemento contenedor que contendrá todos los elementos añadidos de forma dinámica, como un div o, en el en el peor de los casos, el elemento <body>. Código sería algo como esto:

<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 controlador de eventos es en realidad manejados por el elemento <div id="wrapper"> una vez que el evento ha burbujeado a la altura, pero la función sólo se llama si el objetivo inicial coincide con el selector proporcionado. Con este método, puede agregar dinámicamente elementos adicionales con la clase link al div, y la función también se ejecutará cuando se haga clic en ellos.

Fuente

2012-03-14 09:24:56

El interlocutor está registrando un mapa de controlador, no un solo controlador, por lo que 'on (eventMap, selector)' es la forma correcta de usar. –

@ FrédéricHamidi Buen punto, aparentemente no leí la pregunta lo suficiente. –

No se puede obtener jQuery on() para registrar contenido agregado dinámicamente

Respuesta

Cuestiones relacionadas