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>
jquery ajax click live 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

Respuestas:

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