jQuery clic no funciona en ajax contenido generado

Question

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

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

Incluso he intentado

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

o

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

¿Cómo puedo hacer que funcione?

EDIT: mi html:

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

Answer 1

Debe ser hecho de esta manera.

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

Si usted tiene un recipiente que no cambia durante la petición Ajax, esto es con más prestaciones:

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

se unen siempre el caso delegado al elemento estático más cercano que contendrá los elementos dinámicos .

Answer 2

Es esto lo que estamos tratando de hacer? Tenga en cuenta que estoy poniendo el $.on() en el principal, pero seleccionando .button para la acción.

.ON (eventos [, selector] [, datos], manipulador (eventObject))

selector Una cadena selector para filtrar los descendientes de los elementos seleccionados que desencadenan el evento. Si el selector es nulo u omitido, el evento siempre se desencadena cuando alcanza el 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/

Answer 3

Ok he resuelto mi problema mediante el uso de t he .on() funciona correctamente ya que me faltaba un parámetro.

en lugar de

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

he usado

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

Answer 4

En lugar de:

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

utilicé:

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

He utilizado este y ha funcionado.