javascript - 多次触发ajax加载内容事件

Question

我有一个 div，其中有一个段落和一个按钮，如下所示：

<div id="my_div">
    <p>This is a paragraph</p>
    <button class="my_btn">Click here!</a>
</div>

我的 div 中的内容是通过 Ajax 加载的。现在假设我的页面标题中有这样的东西来测试按钮：

$(function(){

    $(document).on('click', '.my_btn', function(){

        alert('my button works!');        

    });

});

我遇到的问题是，每次将内容与我的段落和按钮一起加载到我的 div 中时，当我单击按钮时，我都会收到相同的警报（'我的按钮有效！'），这意味着，如果内容加载了 100 次，我收到了 100 次警报，知道如何解决这个问题以及为什么会这样吗？

谢谢

Answer 1

这有点小技巧，但应该可以

 $(function(){

   $(document)
    .off()
    .on( 'click', '.my_btn', function(){

    alert('my button works!');        

  });

});

Answer 2

您能否发布 ajax 调用以及如何加载 div 以获得更详细的说明。

也就是说，这里有一些似乎可以正常工作的示例代码。 在这里摆弄

<div id='data' style='display:none;'>
    <p>This is a paragraph</p>
    <button class="my_btn">Click here!</a></div>
<div id='target'></div>
<button class='load'>this load works</button>

$(document).ready(function() {
    $(document).on('click', '.my_btn', function(){
        alert('my button works!');        
    });       
    $('.load').click(function() {
        $('#target').html($('#data').html());
    });    
});