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以获得更详细的解释。

那就是说，这里有一些似乎工作正常的示例代码。 fiddle here

<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());
    });    
});

ajax加载的内容事件多次触发

2 个答案: