jQuery拖拽邮件构建器点击事件触发所有已点击按钮更新问题

故障是重复绑定保存按钮事件导致的，和变量赋值逻辑无关。

• 每次点击.dynamic-button时，你都会给#save-button新增一个click事件监听器，且从未移除过历史绑定的监听器。
• 每个监听器的回调函数都通过闭包持有当次点击的btn对象引用，点击保存时所有历史绑定的回调会依次执行，把所有之前点击过的按钮都更新为当前表单的输入值。
• 图片、段落等其他动态元素没有出现同类问题，是因为这些模块的保存事件没有嵌套写在元素点击回调内部，不会产生事件叠加。

打开浏览器开发者工具，给#save-button的点击回调打断点，连续点击3个不同的动态按钮后再点保存，会看到保存逻辑连续触发3次，每次对应的btn分别是之前点击过的3个按钮，和你描述的故障表现完全一致。

两种实现方式，优先选择第一种：

方案1：抽离保存按钮逻辑，单次绑定 #

把保存按钮的事件绑定移到动态按钮点击逻辑的外层，页面初始化时只绑定一次，用外层变量记录当前正在编辑的按钮对象，从根源避免重复绑定。

// 外层作用域定义当前编辑按钮变量，页面初始化时只声明一次
let currentEditBtn = null;

// iframe内动态按钮点击逻辑，仅负责唤起模态框、填充表单、记录当前编辑对象
emailFrame.contents().find('body').on('click', '.dynamic-button', function (e) {
    e.preventDefault()
    currentEditBtn = $(this)
    const url = currentEditBtn.attr('href')
    const cta = currentEditBtn.text()

    $('#button-modal').addClass('active')
    $('select[name="button-cta"]').val(cta)
    $('input[name="button-url"]').val(url)
})

// 保存按钮事件仅在页面加载时绑定一次，永远不会重复叠加
$('body').on('click', '#save-button', function (e) {
    e.preventDefault()
    // 无正在编辑的按钮时直接返回
    if (!currentEditBtn) return
    const saveBtn = $(this)
    const newCta = $('select[name="button-cta"]').val()
    const newUrl = $('input[name="button-url"]').val()
    
    saveBtn.text('Button Saved')
    window.setTimeout(function () {
        saveBtn.text('Save Button Settings')
    }, 2000)

    currentEditBtn.html(newCta)
    currentEditBtn.attr('href', newUrl)
    
    // 可选：保存后清空当前编辑对象、关闭模态框
    currentEditBtn = null
    $('#button-modal').removeClass('active')
})

方案2：绑定前解绑历史事件 #

如果不想调整现有代码结构，每次给#save-button绑定事件前，先移除该元素上之前绑定的同类型点击事件，避免回调叠加。

emailFrame.contents().find('body').on('click', '.dynamic-button', function (e) {
    e.preventDefault()
    const btn = $(this)
    const url = btn.attr('href')
    const cta = btn.text()

    $('#button-modal').addClass('active')
    $('select[name="button-cta"]').val(cta)
    $('input[name="button-url"]').val(url)

    // 绑定前先解绑当前模块之前绑定的click事件，避免重复触发
    $('body').off('click.dynamicBtn', '#save-button').on('click.dynamicBtn', '#save-button', function (e) {
        e.preventDefault()
        const saveBtn = $(this)
        const newCta = $('select[name="button-cta"]').val()
        const newUrl = $('input[name="button-url"]').val()
        
        saveBtn.text('Button Saved')
        window.setTimeout(function () {
            saveBtn.text('Save Button Settings')
        }, 2000)
        btn.html(newCta)
        btn.attr('href', newUrl)
    })
})

注意：代码中click.dynamicBtn是事件命名空间写法，只会解绑当前按钮模块绑定的事件，不会影响页面其他模块给#save-button绑定的逻辑，不建议直接用无命名空间的off('click')写法，避免误删其他功能的事件绑定。

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