jQuery DOM替换后，如何让新生成HTML的ID相关逻辑正常生效？

该问题与replaceWith、html方法本身的功能逻辑无关，换用html方法问题依旧存在的原因也在这里，本质是事件绑定时机与DOM元素存在时机不匹配：

• 页面初始加载完成时，DOM树中不存在id为next的元素，全局作用域下直接执行的$("#next").click(...)绑定逻辑，执行时找不到目标元素，绑定操作完全没有生效。
• 当点击#action完成内容替换、#next元素被插入DOM树后，此前的绑定逻辑早已执行完毕，两种DOM操作方法都不会回溯为已经绑定过的选择器，给新插入的动态元素补绑事件，因此点击新生成的#next没有任何反应。

另外原拼接HTML的代码存在语法错误：字符串内部嵌套未转义的双引号，会直接导致JS语法报错，拼接出的HTML结构不符合预期。

方案1：动态元素插入完成后再绑定事件 #

在#action的点击回调中，完成内容替换、确认#next元素已经插入DOM树后，再执行事件绑定逻辑，示例代码：

$("#action").click(function(){
  // 修正字符串嵌套的引号问题，避免语法错误
  const nextContent = '<div id="next">do this</div>';
  $(this).replaceWith(nextContent);
  // 此时#next已存在于DOM中，再执行绑定
  $("#next").click(function(){
    const bar = $(this).attr('id');
    alert(bar);
  });
});

该方案逻辑简单直接，适合单次插入动态元素的场景，但如果后续需要在不同位置反复生成同类型元素，会出现重复绑定的冗余代码。

方案2：事件委托（长期使用更推荐） #

利用事件冒泡机制，将事件绑定在页面初始加载时就已存在的祖先容器上，由祖先容器统一监听冒泡上来的点击事件，匹配符合指定选择器的子元素后再触发对应逻辑。这种方式不需要关心子元素的插入时机，无论子元素是页面初始就存在、还是后续动态生成的，都能正常触发。
基于jQuery的on()方法实现的示例：

// 把事件绑定在固定存在的document对象上，统一匹配所有动态生成的#next元素
$(document).on('click', '#next', function(){
  const bar = $(this).attr('id');
  alert(bar);
});

// 原#action的替换逻辑保持不变即可
$("#action").click(function(){
  const foo = $(this).attr('id');
  const nextContent = '<div id="next">do this</div>';
  $("#" + foo).replaceWith(nextContent);
});

注意：实际开发中尽量选择离动态元素最近的固定父级容器作为委托绑定的节点，不要将所有事件都绑定在document上，减少事件冒泡的遍历开销，提升页面性能。

<div id="action">点击我替换内容</div>

<!-- 需提前在页面引入jQuery库 -->
<script>
// 委托绑定动态生成元素的事件
$(document).on('click', '#next', function(){
  const bar = $(this).attr('id');
  alert(bar);
});

$("#action").click(function(){
  const foo = $(this).attr('id');
  const nextContent = '<div id="next">do this</div>';
  // 替换原#action元素为新内容
  $("#" + foo).replaceWith(nextContent);
});
</script>

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