Javascript 更改body.innerHTML后事件处理程序卡住

我想用下面的代码更改我的html正文中的一些文本。替换工作正常，但之后它似乎卡住了，无法退出功能，所以脚本的下一部分无法执行

单击后不会发生任何事情。请单击另一个按钮。我认为问题在于更改body.innerHTML的行，因为当我删除这一行时，一切正常

$(".do-replace-button").on("click", function () {
    //some different code
    document.body.innerHTML = document.body.innerHTML.replace(regExp, newWord);
}

$(".another-button").on("click", function (event) {
    //some code that won't execute
}

---

您实际上是在用另一个字符串替换

的

内部HTML

，该字符串是

replace（）

的结果。该字符串被解析并构建到新的DOM元素中，旧的元素将被新的元素替换

因此，您绑定到旧事件上的事件将消失，因为元素已消失。解决这一问题的一种方法是：

a） 对文档本身进行绑定：

$(document).on('click', '.do-replace-button', function() {
  // whatever...
})

b） 找到另一种不那么激进的方式来实现你用这个替代品正在实现的目标

---

请注意删除的不仅仅是您的事件，还有任何由您可能已加载并在脚本运行时已初始化的库/插件绑定的事件。我强烈建议不要在

innerHTML

上运行

replace

，尤其是在

上运行
innerHTML
，您实际上是在将
的
innerHTML
替换为一个字符串，它是
replace（）
的结果。该字符串被解析并构建到新的DOM元素中，旧的元素将被新的元素替换

因此，您绑定到旧事件上的事件将消失，因为元素已消失。解决这一问题的一种方法是：

a） 对文档本身进行绑定：

$(document).on('click', '.do-replace-button', function() {
  // whatever...
})

b） 找到另一种不那么激进的方式来实现你用这个替代品正在实现的目标

请注意删除的不仅仅是您的事件，还有任何由您可能已加载并在脚本运行时已初始化的库/插件绑定的事件。我强烈建议不要在
innerHTML
上运行
replace
，尤其是在
调用
document.body.innerHTML
和完全替换文档内部html后的右手赋值，或者更具体地说，解析器正在
主体中构建一个全新的节点树
，因此所有先前可能分配了事件侦听器的
HTMLElement
节点都不再存在。我建议您采用另一种方法，只替换与正则表达式匹配的HTML，而不是替换body元素的整个HTML内容。或者，您可以在替换正文HTML后触发的第一个事件侦听器回调中调用一个函数，该函数将重新初始化事件侦听器。
对
document.body.innerHTML的调用以及在完全替换文档中的HTML之后的右手赋值，或者更具体地说，解析器正在
主体
中构建一个全新的节点树，因此所有先前可能分配了事件侦听器的
HTMLElement
节点都不再存在。我建议您采用另一种方法，只替换与正则表达式匹配的HTML，而不是替换body元素的整个HTML内容。或者，您可以在替换主体HTML后触发的第一个事件侦听器回调中调用一个函数，该函数将重新初始化事件侦听器。
您在主体中使用
innerHTML
，因此在执行第一个事件时，所有其他处理程序都将被删除。您在正文中使用
innerHTML
，因此在执行第一个事件时，所有其他处理程序都将被删除。