Jquery click 对 ajax 生成的内容不起作用

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

点击一个按钮，这是在一个容器，然后一个 ajax 调用完成和内容 得到更新与新的东西，然后当我尝试点击 .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>
98932 次浏览
小开

这就是你想做的吗？注意，我将 $.on()放在父级上，但是选择 .button进行操作。

. on (事件 [ ，选择器][ ，数据] ，处理程序(eventObject))

选择器 一个选择器字符串，用于筛选所选内容的后代 触发事件的元素。如果选择器为空或省略, 事件总是在到达所选元素时触发。

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/

小开

好的，我通过正确使用. on ()函数解决了我的问题，因为我丢失了一个参数。

而不是

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

我用过

$(".container").on("click", ".button", function() { } );
小开
最佳答案

应该这么做。

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

如果有一个容器在 ajax 请求期间没有变化，那么它的性能会更好:

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

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

小开

而不是:

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

我用:

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

我用过这个，它起作用了。


提交答案