jQuery haga clic en elemento dinámico

Ver el comentario del código:

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);

    container.click(function(){
        alert('test'); // Not triggered.
    });
});

El html es:

<input type="radio" value="female" name="gender" />

Cualquiera sabe por qué la alerta no se activa cuando se hace clic, y sí, es visible en CSS. Cuando uso:

console.log(container);

Me da el HTML que contiene.

Muchas Gracias

preguntado el 11 de junio de 12 a las 18:06

3 Respuestas

$('body').on('click', 'div.radio', function() {

});

Código Completo

$('body').on('click', 'div.radio', function() {
  alert('test'); 
});

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);
});

NOTA

En lugar de body, deberías usar un static-element ese es el recipiente de container.


¿Por qué necesitas esto?

Necesita un controlador de eventos delegado, ya que su elemento se agregó a DOM dinámicamente, eso significa. después de cargar la página.

Respondido el 20 de junio de 20 a las 10:06

¿Por qué añadiste esa nota sobre el body? Utilizando el document elemento es realmente recomendado según el documentación de jQuery. "Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior. Al elegir un elemento que está garantizado que estará presente en el momento en que se adjunta el controlador de eventos delegados, puede usar eventos delegados para evitar la necesidad de adjuntar y eliminar controladores de eventos con frecuencia". - Terry

después de algunas pruebas, me parece que el "envoltura" clona el objeto que le pasa como argumento, o se pierde la referencia al objeto, pero no estoy tan seguro.

una primera solución es asignar el evento "onclick" antes de mover el objeto en el "wrap".

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    $(container).click(function(){
        alert('test'); // triggered now.
    });

    input.wrap(container).after(mark);
});

una versión simplificada:

$.each($('input[type="radio"]'), function(){

    var wrapper = $('<div class="radio"></div>').click(function(){
        alert('test'); // triggered now.
    });

     $(this).wrap(wrapper).after($('<span />'));
});

no olvides declarar esta función en la función onload

$(function(){

   // your code here ....
});

Respondido el 11 de junio de 12 a las 19:06

También me afectó esto y descubrí que on está disponible solo con jquery 1.7 y superior. Estoy en jquery 1.4.1 y on no está disponible con la versión. Actualizar jquery era algo que quería evitar.

Agradecidamente delegar estaba allí y resolvió el problema.

respondido 04 nov., 12:15

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.