jQuery代码重复执行问题求助：Ajax编辑TitleDay多次触发请求

这是个很常见的动态内容事件绑定坑，我来帮你拆解原因和解决办法：

问题根源 #

你遇到的核心问题是事件重复绑定：因为编辑按钮是通过Ajax动态加载的，如果你每次加载完内容后，都重新执行一遍点击事件的绑定代码（比如在Ajax的success回调里写$('.edit-btn').click(...)），那么已经存在的按钮元素会被重复绑定事件处理函数。第一次绑定1次，第二次加载又绑定1次，点击时自然就会触发2次请求，次数会随着你加载的次数叠加。

解决办法 #

方法1：用事件委托（最推荐）

事件委托利用DOM的事件冒泡机制，把事件绑定到一个页面加载时就存在的静态父元素上，而不是直接绑定到动态生成的按钮上。这样不管按钮什么时候被加载进来，点击事件都会被正确捕获，而且只会绑定一次，绝对不会出现重复触发的情况。

把你原来的绑定代码：

// 错误写法：每次Ajax加载后都执行，会重复绑定
$('.edit-title-day-btn').click(function() {
    // 你的编辑请求Ajax代码
});

改成这样：

// 正确写法：只需要在页面初始化时执行一次
$(document).on('click', '.edit-title-day-btn', function() {
    // 你的编辑请求Ajax代码
});

优化提示：尽量别用document作为父元素，找离动态按钮最近的静态容器（比如所有计划内容都放在#fitness-plan-wrapper里），绑定到这个容器上性能更好：

$('#fitness-plan-wrapper').on('click', '.edit-title-day-btn', function() {
    // 你的编辑请求Ajax代码
});

方法2：绑定前先解绑事件

如果你暂时不想用事件委托，也可以在每次绑定前，先移除该元素上已有的同类型事件处理函数，避免叠加：

// 在Ajax的success回调里执行
$('.edit-title-day-btn').off('click').click(function() {
    // 你的编辑请求Ajax代码
});

off('click')会清空按钮上所有已绑定的click事件，再重新绑定新的，这样就不会有重复触发的问题。不过这种方法需要每次加载内容都执行一次，效率不如事件委托高。

额外检查点 #

• 确认你的事件绑定代码是不是写在了Ajax的success/complete回调里，如果是，那就是重复绑定的直接原因；
• 如果用了模板渲染动态内容，别在模板里内嵌事件绑定代码，否则每个生成的按钮都会自带事件，也会导致重复触发。

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