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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我在用$(".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>
提问于
用户回答回答于

应该这样做。

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

如果有一个容器在Ajax请求期间不发生更改,则这是更好的性能:

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

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

用户回答回答于

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

不是

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

我用

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

扫码关注云+社区

领取腾讯云代金券