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

【问题标题】：Event handler stuck after changing body.innerHTML更改 body.innerHTML 后事件处理程序卡住
【发布时间】：2017-07-23 00:20:48
【问题描述】：

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

点击 .another-button 后什么都不会发生。我认为问题在于更改 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
}

【问题讨论】：

您在正文中使用innerHTML，所以当第一个事件执行时，所有其他处理程序都将被删除。 Manipulating innerHTML removes the event handler of a child element?

标签： javascript jquery innerhtml

【解决方案1】：

您实际上是将<body> 的innerHTML 替换为其他字符串，即replace() 的结果。该字符串被解析并内置到新的 DOM 元素中，旧的被新的替换。

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

a) 绑定到文档本身：

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

b) 找到另一种不那么激进的方法来实现您通过该替换实现的目标。

请注意不仅您的事件会被删除，而且任何任何库绑定的事件/在脚本运行时，您可能已经加载并初始化了插件。我强烈建议不要在innerHTML 上运行replace，尤其是在<body> 上。

【讨论】：

【解决方案2】：

对document.body.innerHTML 的调用以及在它完全替换文档中的html 之后出现的右手分配，或者更具体地说，解析器正在body 内构建一个全新的节点树，所以你所有的@ 987654323@ 之前可能分配有事件侦听器的节点不再存在。我建议您采用另一种方法，仅替换与您的正则表达式匹配的 HTML，而不是 body 元素的整个 HTML 内容。或者，您可以有一个在替换正文 HTML 后触发的第一个事件侦听器回调中调用的函数，该函数将重新初始化事件侦听器。

【讨论】：