jquery click 不适用于 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!');
    });

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