1

我有这段代码可以搜索给定的字符串 ( _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 的情况下运行替换？

还是完全有更好的方法？

谢谢您的帮助！

4

2 回答 2

1

哎哟! 您尝试做的事情可能通过大量工作和迭代节点（而不是元素）来实现......但是为什么要打扰呢？通过将范围限定为 DOM 的一个子部分的模板和使用委托的事件处理程序相结合，这样的工作变得最简单。

JSRender（https://github.com/BorisMoore/jsrender）是之前的jQuery模板插件（https://github.com/jquery/jquery-tmpl）的替代品，但是jquery-tmpl还是比较好用的（我相信潘多拉仍然使用它）。您可以使用非 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”元素时才会触发处理程序。

享受！

编辑：这个和模板系统的后端库是完全不重要的。然而，这项技术是。混合作用域模板和委托事件，你就很成功了。

于 2012-05-17T06:13:19.507 回答
0

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

就像是..

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

在 jQuery 中，

$('.className').text('text to insert');
于 2012-05-17T05:51:59.650 回答