clique de jquery não funciona em conteúdo gerado ajax

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

para clicar em um botão que está em um recipiente, mas, em seguida, uma chamada ajax é feita eo conteúdo é atualizado com novas coisas e, em seguida, quando eu tento clicar em .button não vai funcionar … nada será retornado quando clico no botão.

Eu até tentei

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

ou

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

Como posso fazer isso funcionar?

EDIT: meu html:

 
  • item1
  • item2
  • item3

Deve ser feito assim.

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

Se você tiver um contêiner que não seja alterado durante a solicitação do ajax, isso terá melhor desempenho:

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

Sempre ligue o evento delegado ao elemento estático mais próximo que conterá os elementos dynamics.

Ok eu resolvi meu problema usando a function .on () corretamente desde que eu estava faltando um parâmetro.

ao invés de

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

eu usei

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

Ao invés de:

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

Eu usei:

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

Eu usei isso e funcionou.

É isso que você está tentando fazer? Note que estou colocando o $.on() no pai, mas selecionando o .button para a ação.

.on (events [, seletor] [, dados], manipulador (eventObject))

seletor Uma sequência de seletores para filtrar os descendentes dos elementos selecionados que acionam o evento. Se o seletor for nulo ou omitido, o evento sempre será acionado quando atingir o elemento selecionado.

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

Outra demonstração:

 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/