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

小编典典

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

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>

阅读 236

2020-07-26

共1个答案

小编典典

应该以这种方式完成。

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

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

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

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

2020-07-26