jQuery动态生成按钮点击事件多次触发的解决方法咨询

这个问题我太熟了！本质就是事件重复绑定或者重复元素导致的触发叠加，给你几个靠谱的解决办法，按你的场景选就行：

核心原因拆解 #

你遇到的情况要么是每次动态生成元素时重复绑定了点击事件，要么是页面里存在多个ID为change_alert的元素（HTML里ID必须唯一哦！），导致点击时所有匹配的元素都触发事件，次数自然就叠加了。

最推荐的解决方案：事件委托 #

把点击事件绑定在页面加载时就存在的静态父容器上（比如你用来插入动态内容的那个容器），而不是直接绑定动态生成的元素。这样只需要绑定一次，不管后续生成多少次动态内容，点击都只会触发一次：

// 假设你把动态内容插入到#static-container这个静态容器里
$('#static-container').on('click', '#change_alert', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    alert('终于只弹一次啦！');
});

// 你的动态内容代码保持不变（如果是多次追加内容，建议把ID改成class，避免重复）
var dynamic_content = '<div id="change"><div class="view"><a href="#" id="change_alert">CLICK</a></div></div>';
// 插入到容器的示例代码：$('#static-container').html(dynamic_content);

如果是多次追加动态内容（不是替换原有内容），那#change_alert的ID会重复，这不符合HTML规范，赶紧把ID改成class，再调整事件委托的选择器：

// 静态容器绑定，匹配class选择器
$('#static-container').on('click', '.change_alert', function(e) {
    e.preventDefault();
    alert('只弹一次！');
});

// 动态内容把ID改成class
var dynamic_content = '<div id="change"><div class="view"><a href="#" class="change_alert">CLICK</a></div></div>';

备选方案：先解绑再绑定 #

如果你一定要直接给动态元素绑定事件，那每次绑定前先移除之前的事件，避免重复绑定：

// 生成并插入动态内容
var dynamic_content = '<div id="change"><div class="view"><a href="#" id="change_alert">CLICK</a></div></div>';
$('#some-container').html(dynamic_content);

// 先移除旧的点击事件，再绑定新的
$('#change_alert').off('click').on('click', function(e) {
    e.preventDefault();
    alert('只弹一次！');
});

这个方案需要每次生成内容都执行绑定代码，不如事件委托省心，但适合场景简单的情况。

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