Javascript:替换 html 中的字符串，而不破坏未来事件处理程序的元素

Javascript: Replace string in html without destroying the elements for future event handlers

本文关键字：坏未来 事件处理 元素 程序 替换 html 字符串 Javascript      更新时间：2023-09-26

我有这段代码，它搜索给定的字符串(_aff.tractionsCode(并将其替换为另一个字符串(tractionsId(，如下所示：

content = document.body.innerHTML.replace(_aff.tractionsCode, tractionsId);
document.body.innerHTML = content;

下面是一个示例：

假设_aff.tractionsCode等于 {tractionsCode}

<div class="affiliate" rel="{tractionsCode}">{tractionsCode}</div>

它需要替换 {tractionsCode} 的两个实例

但是，问题是一旦发生这种情况，它就会替换加载的html，因此我可能或(很可能(无法访问的其他javascript事件处理程序不再正常运行。

有没有办法查看 html(包括 rel 等属性(并运行替换而不覆盖所有 html？

还是有更好的方法？

感谢您的帮助！

哎哟！您正在尝试做的事情可能可以通过大量工作和迭代节点(不是元素(来实现......但何必呢？通过将范围限定为 DOM 子节的模板和使用委托的事件处理程序组合在一起，使此类工作变得最简单。

JSRender(https://github.com/BorisMoore/jsrender(是以前的jQuery模板插件(https://github.com/jquery/jquery-tmpl(的替代品，但jquery-tmpl仍然相当可用(我相信pandora仍然使用它(。您可以使用非 javascript 类型将模板存储在脚本块中，并轻松提取该内容以呈现和替换 DOM 的特定子部分：

<script id="affiliateThing" type="text/x-jquery-tmpl">
<div class="affiliate" rel="${transactionsCode}">${transactionsCode}</div>
</script>
<script>
    jQuery("#affiliateThing").
        tmpl([{'transactionsCode': 'wee'}]).
        appendTo("#someElement");
</script>

若要确保替换此标记不会破坏任何事件处理程序，请确保通过父元素委托事件：

jQuery("#someElement").on("click", ".affiliate", function(event){alert('wee');});

此语句将事件处理程序绑定到"#someElement"而不是单个".affiliate"元素，但仅在事件源自".affiliate"元素时触发处理程序。

享受！

编辑：这个和模板系统的后端库完全不重要。然而，技术是。混合使用范围模板和委托事件，您就是黄金。

通过body innerHTML将覆盖所有内容。您需要搜索要替换的特定文本节点。

类似的东西..

document.getElementBy..('identifier').innerHTML

在jQuery中，

$('.className').text('text to insert');
相关文章：