Question

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

单击.another按钮后不会发生任何事情。我认为问题是改变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
}

Answer 1

您实际上正在使用其他内容替换innerHTML的{{1}}，这是一个字符串，是<body>的结果。该字符串被解析并构建到新的DOM元素中，旧的元素将被新的元素替换。

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

a）绑定文档本身：

replace()

b）找到另一种不太积极的方式来实现你用替换所取得的成就。

请注意不仅您的活动被删除，而且任何事件您可能已加载并已在脚本运行时初始化的任何库/插件绑定。我强烈建议您不要在$(document).on('click', '.do-replace-button', function() { // whatever... })上投放replace，尤其是innerHTML。

Answer 2

对document.body.innerHTML的调用以及之后的右手赋值完全取代了文档中的html，或者更具体地说，解析器正在body内构建一个全新的节点树，所以您之前可能已分配了事件侦听器的所有HTMLElement个节点都不再存在。我建议你去另一条路线，只替换匹配你的正则表达式的HTML而不是body元素的整个HTML内容。或者你可以在第一个事件监听器回调中调用一个函数，该函数在替换正文HTML后触发，这将重新初始化事件监听器。

更改body.innerHTML后事件处理程序停滞不前

2 个答案: