javascript - jQuery 在复杂的 HTML 字符串中评估 JavaScript

Question

这让我发疯......

我想做的是更新网页的一部分，出于不值得解释的原因，该请求要求一个全新的 HTML 页面(包括其头部)，然后仅提取其中包含的 HTML指定的元素(由 ID 标识)。

最初，我有以下 JavaScript 代码，每当对新 HTML 的 AJAX 请求完成时，它就会运行:

var $newContent = $(newHtmlContent);
loadingElement.innerHTML = $("#" + loadingElementId, $newContent).html();

这很棒，直到我加载了一些包含在指定元素中的 HTML，其中包括一些需要运行的脚本，所以我将其更改为:

var $newContent = $(newHtmlContent);
$(loadingElement).html($("#" + loadingElementId, $newContent).html());

我读到 jQuery 将使用 html() 函数的 HTML 字符串参数评估任何脚本 - 然而，问题似乎是脚本在此调用之前被剥离。通过 Firebug 查看后，似乎正在发生以下情况:

$(newHtmlContent) // includes all 'script' elements
$("#" + loadingElementId, $newContent) // has no scripts
$("script", $newContent) // empty jQuery object

有人有什么建议吗？提前致谢。

Answer 1

做了 quick test (fiddle) ，将以下标记作为字符串:

<div id="root">
    <div>some dynamic content</div>
    <script type="text/javascript">alert("hello");</script>
    <div class="desiredElement">after script</div>
</div>

jQuery 会产生一个类似

的对象

> [0]: #root
> [1]: script

[0] 将包含 #root 中除脚本之外的所有 html，脚本被分离到它们自己的对象中。这似乎适用于标记中的所有脚本。

所以你可以做这样的事情来运行脚本:

var $new = $(dynamicContent); // dynamicContent is string
var $desired = $new.find('.desiredElement');

$new.eq(1).appendTo('body'); // run the script