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!');
    });

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

Answer 2

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

代替

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

我用了

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

Answer 3

代替:

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

我用了:

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

我用过这个并且有效.