使用 innerHTML 属性添加 Html 不会触发 jQuery 就绪事件答案

【问题标题】：Adding Html using innerHTML property doesn't fire jQuery ready event使用 innerHTML 属性添加 Html 不会触发 jQuery 就绪事件
【发布时间】：2015-03-28 21:18:50
【问题描述】：

我在使用 jQuery 的 .html() 方法时遇到了一些性能问题，因为它真的很慢。所以我搜索了替代品，我发现了一些：

所以我现在用建议的方法替换.html()。但是现在我有另一个问题：

要添加的 Html 中的 Javascript 未执行。

我写了一个简单的小提琴来展示正在发生的事情：

Javascript not being executed

谁能建议我如何解决这个问题，因为我需要执行 javascript。

【问题讨论】：

看看这个...stackoverflow.com/questions/2592092/…
是的，在 babyblade567 提到的问题中，使用 stripandexcute 函数查看答案。这对我有用。请参阅此jsFiddle。我只需要将脚本中的innerText 更改为innerHTML。

标签： javascript jquery html

【解决方案1】：

您可能需要eval() 脚本：

var container = document.getElementById("container"),
    content = document.getElementById("content");

$("#button2").on("click", function(){
    container.innerHTML = content.innerHTML;
    var scripts = container.getElementsByTagName('script');
    for(var i=0, l=scripts.length; i<l; i++) eval(scripts[i].innerText);
});

JS Fiddle Demo

【讨论】：

【解决方案2】：

对我来说，第一个按钮会触发脚本，第二个不会。

这是因为 .innerHTML 仅引用元素内的文本，而不是 scipts 或其他标签。

【讨论】：