jQuery的点击不起作用的AJAX生成的内容

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

点击一个容器上的button，然后ajax调用完成，内容得到更新与新的东西，然后当我尝试点击。 .button它不会工作…没有什么会返回时，我点击button。

我甚至尝试过

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

要么

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

我怎样才能使它工作？

编辑：我的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

应该这样做。

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

如果你有一个容器在ajax请求期间不改变，这是更高性能的：

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

始终将委托事件绑定到最接近包含dynamic元素的静态元素。

Answer 2

好吧，我通过正确使用.on（）函数解决了我的问题，因为我缺less一个参数。

代替

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

我用了

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

Answer 3

代替：

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

我用了：

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

我用这个，它的工作。

Answer 4

这是你想要做的？ 请注意，我将$.on()放在父级上，但select了.button作为操作。

.on（events [，selector] [，data]，handler（eventObject））

select器select器string，用于过滤触发事件的选定元素的后代。 如果select符为空或省略，那么事件总是在到达选定元素时被触发。

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

另一个示范：

 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/