为何JQuery代码重复触发？模态框点击事件多次触发问题求助

这个问题我之前也碰到过，核心原因是你每次打开模态框时都重复绑定了事件监听，导致触发次数越来越多。我来给你详细分析并提供几种可行的解决办法：

为什么会出现重复触发？ #

你看这段核心代码：

$('.credit_btn').on('click', function() { 
    $('.modal-container').load('modal_test.php', function() { 
        $('#myModal').modal({show:true}); 
    }); 
    // 每次点击「Open Modal」都会执行这行绑定代码！
    $(document).on("click", ".myBtn", function(){
        alert('click');
    });
});

每次你点击「Open Modal」按钮时，都会执行$(document).on("click", ".myBtn", ...)这行代码——这相当于给document对象新增了一个事件委托监听。第一次打开模态框时绑定1次，第二次打开时又绑定1次，当你点击.myBtn时，所有绑定的监听都会依次触发，自然就弹出多次提示了。

而且因为事件委托是绑定在document上的，哪怕旧的模态框被移除，之前绑定的监听并不会自动消失，只会不断累积。

解决方案（保留DOM功能的前提下避免重复触发） #

这里有三种靠谱的解决思路，你可以根据自己的场景选择：

1. 绑定前先移除旧的事件监听 #

每次绑定新的事件委托前，先用off方法移除之前针对.myBtn的点击监听，再重新绑定：

$('.credit_btn').on('click', function() { 
    $('.modal-container').load('modal_test.php', function() { 
        $('#myModal').modal({show:true}); 
    }); 
    // 先解绑，再绑定，确保只有一个监听存在
    $(document).off("click", ".myBtn").on("click", ".myBtn", function(){
        alert('click');
    });
});

这种方法的好处是不需要调整代码结构，只需要在绑定前加一行off即可快速解决问题。

2. 把事件委托移到外部，只绑定一次 #

事件委托的核心优势就是能监听动态添加的元素，所以完全不需要每次打开模态框都重新绑定。你可以把这行绑定代码移到$(document).ready的最外层，只执行一次：

$(document).ready(function() { 
    // 只绑定一次，永久生效，不管模态框加载多少次
    $(document).on("click", ".myBtn", function(){
        alert('click');
    });

    // Open Modal的逻辑保持不变
    $('.credit_btn').on('click', function() { 
        $('.modal-container').load('modal_test.php', function() { 
            $('#myModal').modal({show:true}); 
        }); 
    }); 
});//End of doc

这是最推荐的方案，既高效又简洁，完全符合事件委托的设计初衷。

3. 直接给动态加载的元素绑定事件（利用load回调） #

既然模态框内容是通过load动态加载的，你可以在load的回调函数里直接给新生成的.myBtn绑定事件——因为每次load都会替换.modal-container里的内容，旧的.myBtn会被移除，所以不会出现重复绑定的问题：

$('.credit_btn').on('click', function() { 
    $('.modal-container').load('modal_test.php', function() { 
        $('#myModal').modal({show:true}); 
        // 给当前刚加载的.myBtn绑定事件
        $(".myBtn").on("click", function(){
            alert('click');
        });
    }); 
});

这种方法适合不需要全局监听的场景，事件只绑定在当前模态框的按钮上，模态框关闭后元素被移除，事件也会跟着销毁。

内容的提问来源于stack exchange，提问作者JulianJ