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> 

应该这样做。

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

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

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

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

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

代替

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

我用了

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

代替:

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

我用了:

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

我用这个,它的工作。

这是你想要做的? 请注意,我将$.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/