javascript - 为什么这个 JavaScript 正则表达式替换会破坏这个 jQuery 代码？

Question

我需要在页面加载时运行此 JavaScript:

document.body.innerHTML = document.body.innerHTML.replace(/\} \}/g, '}}');

我还需要这个 jQuery 在页面加载时运行(处理我的侧边栏):

$('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
});

这适用于侧边栏(放置在 </body> 之前):

<script>$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});</script>

但是如果我添加这样的正则表达式行:

<script>$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
  document.body.innerHTML = document.body.innerHTML.replace(/\} \}/g, '}}');
});</script>

正则表达式有效，但侧边栏位停止工作。这是因为我混合了 JavaScript 和 jQuery 吗？我该如何解决这个问题？

Answer 1

您正在替换文档正文，因此您的绑定(bind)会丢失。

$(document).ready(function() {
  // change body
  document.body.innerHTML = document.body.innerHTML.replace(/\} \}/g, '}}');
  // then bind to new body
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });

});