jQuery单击不适用于ajax生成的内容

Question

我在用 $(".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>

Answer 1

应该以这种方式完成。

$('body').on('click', '.button', function (){

        alert('click!');

    });

如果您的容器在ajax请求期间没有更改，则性能更高：

$('.container').on('click', '.button', function (){

        alert('click!');

    });

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

Answer 2

好的，因为我缺少一个参数，所以可以通过正确使用.on（）函数解决我的问题。

代替

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

我用了

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