jQuery动态修改按钮ID后新绑定点击事件不触发问题咨询

• 你使用的jQuery直接绑定事件的语法，是在代码执行时就将事件挂载到匹配到的DOM元素上的。页面初次加载执行绑定时，只有id=btnSendInvoice的按钮存在，所以点击事件成功绑定到这个按钮元素上，后续你修改元素的id、文本属性，都不会自动移除已经绑定完成的旧事件。
• 页面初次加载执行$('#btnSetPayment').click(...)绑定时，页面上还不存在id=btnSetPayment的元素，所以这个选择器没有匹配到任何节点，对应绑定逻辑完全没有生效。
• 所以修改id后的按钮上依然只挂载了最初的点击事件，点击时只会触发打印Button A的逻辑。

提供两种常用的实现方式：

方案1：使用事件委托（更推荐） #

将事件绑定到页面上始终存在的父级元素（比如document，或者按钮的直接父容器），事件触发时才会匹配当前元素的选择器，天然支持动态修改属性的元素：

<button id="btnSendInvoice">Button A</button>
<script>
// 委托到document，匹配id为btnSendInvoice的元素触发
$(document).on('click', '#btnSendInvoice', function() {
  console.log('BUTTON A')
  $("#btnSendInvoice").text("Button B")
  $("#btnSendInvoice").attr("id","btnSetPayment")
});

// 委托到document，匹配id为btnSetPayment的元素触发
$(document).on('click', '#btnSetPayment', function() {
    console.log('BUTTON B')
});
</script>

方案2：修改属性时手动替换绑定事件 #

修改按钮id前先移除旧的绑定事件，再给当前按钮绑定新的点击事件：

<button id="btnSendInvoice">Button A</button>
<script>
$('#btnSendInvoice').click(function() {
  console.log('BUTTON A')
  const $currentBtn = $(this)
  $currentBtn.text("Button B")
  // 移除旧的点击事件
  $currentBtn.off('click')
  // 修改id
  $currentBtn.attr("id","btnSetPayment")
  // 绑定新的点击事件
  $currentBtn.click(function() {
    console.log('BUTTON B')
  })
});
</script>

另外注意你原代码中console.log的字符串没有加引号，实际运行会抛出变量未定义的错误，修复时记得给打印内容添加引号。

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