jquery click no funciona en contenido generado por ajax

79

estoy usando $(".button").on("click", function(){ });

para hacer clic en un botón que está en un contenedor, pero luego se realiza una llamada ajax y el contenido se actualiza con cosas nuevas y luego, cuando intento hacer clic .button, no funcionará ... no se devolverá nada cuando haga clic en el botón.

Incluso lo intenté

$(".button").live("click", function(){ });

o

$(".button").click(function(){ });

¿Cómo puedo hacer que funcione?

EDITAR: mi html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

— stergosz
fuente

1

Muestre lo que devuelve la llamada ajax.

— ron tornambe

Y el resto de jQuery que adjunta al oyente. Lo que está describiendo es exactamente lo que livese supone que debe manejar, por lo que es extraño que eso no funcione.

— Brandan

tengo un ul donde hago clic en ellos y simplemente hago eco de "prueba" en javascript con .on ("clic") pero cuando hago clic en el botón, hará una llamada ajax y volverá a cargar el ul, pero luego dejará de hacer nada cuando haga clic en el botón ... no devolverá nada.

— stergosz

158

Debe hacerse de esta manera.

$('body').on('click', '.button', function (){
        alert('click!');
    });

Si tiene un contenedor que no cambia durante la solicitud ajax, este es más eficaz:

$('.container').on('click', '.button', function (){
        alert('click!');
    });

Vincule siempre el evento delegado al elemento estático más cercano que contendrá los elementos dinámicos.

— gdoron está apoyando a Monica
fuente

¡Gracias por las respuestas! Todavía creo que esto es muy extraño y no se siente bien usarlo de esta manera. Ojalá jquery tuviera una mejor manera de manejar este tipo de situaciones

— Miguel Stevens

1

@MiguelStevens, sigue leyendo los documentos una vez que hayas leído y entendido el concepto, no será extraño y tendrá mucho sentido.

— gdoron está apoyando a Monica

Pero, ¿cómo escribiría padre para esto ... $ ("input # someId"). Autocomplete ({// some code}); ... no hay ningún evento aquí ..

— Dragon

1

@Sadaquat, sugiero escribir una pregunta completa con todos los detalles requeridos en un hilo diferente. Si no obtiene una respuesta, puede enviarme un mensaje con un comentario y haré todo lo posible para ayudar.

— gdoron está apoyando a Monica

1

¡Finalmente encontré la solución que estaba buscando! Gracias señor

— KP

40

Ok, resolví mi problema usando la función .on () correctamente ya que me faltaba un parámetro.

en vez de

$(".button").on("click", function() { } );

solía

$(".container").on("click", ".button", function() { } );

— stergosz
fuente

1

Solo una nota, el argumento selector no es obligatorio , pero es necesario en este caso.

— Jared Farrish

Gracias por la solución, +1

— Aldry Wijaya

¿Por qué el argumento selector no es obligatorio, pero es necesario en este caso?

— ryentzer

Creo que se debe a que el selector se vuelve a ejecutar en este caso, pero si no se incluye, no se captura en la lista de elementos ejecutada originalmente con el selector.

— Bing

8

En vez de:

$(".button").on("click", function() { } );

Solía:

$(".container").on("click", ".button", function() { } );

He usado esto y funcionó.

— Macc
fuente

3

¿Es esto lo que estás intentando hacer? Tenga en cuenta que estoy colocando el $.on()en el padre, pero seleccionando el .buttonpara la acción.

.on (eventos [, selector] [, datos], controlador (eventObject))

selector Una cadena de selección para filtrar los descendientes de los elementos seleccionados que desencadenan el evento. Si el selector es nulo u omitido, el evento siempre se activa cuando llega al elemento seleccionado.

http://api.jquery.com/on/

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/1

Otra demostración:

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = ['blue','green','red'],
    color = 0;

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css('color', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

— Jared Farrish
fuente