在 jQuery 中替换 html 时保留事件处理程序答案

【问题标题】：Preserving event handlers when replacing html in jQuery在 jQuery 中替换 html 时保留事件处理程序
【发布时间】：2019-05-15 18:28:14
【问题描述】：

我写了一个jQuery函数：

function linkify(parent, regex, url) {
  var children = parent.children('main,article,div,p,li,ul,ol,span');
  const re = RegExp(`(${regex})(?![^<]*>|[^<>]*<\/)`, 'ig');
  children.each(function() {
    linkify($(this), regex, url);
    $(this).html(
      $(this)
        .html()
        .replace(re, `<a rel="nofollow" href="${url}">$1</a>`)
    );
  });
}

它是一个递归函数，沿着 DOM 树向下，查找正文中出现的单词，如果找到则将它们转换为链接。

效果很好。我遇到的问题是，当我这样做时：

$(this).html(
  $(this).html()
)

（即复制 HTML），它会丢弃所有绑定的事件处理程序。这意味着在真实页面中，它可能会破坏 JS 菜单等内容。

如何在复制 HTML 代码的同时保留绑定的任何内容？

PS 我检查了其他类似的帖子，但是这不同，因为此代码将包含在任意页面中 - 我需要开发一个通用解决方案，而不是特定于特定页面的解决方案。

【问题讨论】：

您只能将text nodes 替换为<a>${text node}</a>，因此，如果不替换整个innerHTML，您将保留其行为....
我可以尝试一下。换一种方式，是否可以复制绑定？
Click not working after clearing and appending the html的可能重复
将clone 的this 与true 一起使用，这样绑定就不会被删除，然后将this clone 添加到html
@DupinderSingh 在这种情况下如何分配绑定？你能举个简短的例子吗？

标签： javascript jquery

【解决方案1】：

只需使用 JavaScript 来复制 HTML 而不是 jQuery 来执行此特定操作

【讨论】：

如何保留绑定？
只做 var old = el.innerHTML; el.outerHTML = <a href="old">old</a>
我需要使用正则表达式替换文本，而不仅仅是包装其他元素。不过，我也许可以制作这个作品的一个版本，我会进行实验。
@cjm2671 我的意思是在你的正则表达式函数中使用它，我认为“this”变量是一个真正的 HTML 节点，如果是这样就用它代替“el”

【解决方案2】：

我是 dineshkumar mulchandani，我已经解决了它并在 Upwork 上发布了一个提案，请找到我的提案并尝试我在提案中发布的解决方案，

感谢和问候，我会期待奖励，

迪内什库马尔。

【讨论】：