jquery click no funciona en ajax contenido generado

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

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

Incluso intenté

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

o

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

¿Cómo puedo hacer que funcione?

EDITAR: mi html:

 
  • item1
  • item2
  • item3

Debería hacerse de esta manera.

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

Si tiene un contenedor que no cambia durante la solicitud de AJAX, esto es más eficiente:

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

Siempre vincule el evento delegado al elemento estático más cercano que contendrá los elementos dynamics.

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

en lugar de

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

solía

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

En lugar de:

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

Solía:

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

Lo he usado y funcionó.

¿Es esto lo que estás tratando de hacer? Tenga en cuenta que estoy poniendo el $.on() en el elemento primario, pero seleccionando el .button Para la acción.

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

selector Una secuencia de 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/

 

Stuff

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/