jQuery在HTML字符串中评估JavaScript并发症(jQuery evaluating JavaScript in HTML string with complications)

jQuery在HTML字符串中评估JavaScript并发症(jQuery evaluating JavaScript in HTML string with complications)

这真让我抓狂...

我要做的是更新网页的一部分，由于不值得解释的原因，请求是要求一个全新的HTML页面（包括其头部），然后只提取指定元素中包含的HTML （由身份证明）。

最初，我有以下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

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

This is driving me crazy...

What I am trying to do is update a portion of a webpage, and for reasons not worth explaining, the request is asking for a whole new HTML page (including its head) and then pulling out only the HTML that was contained within a specified element (identified by an ID).

Originally, I had the following JavaScript code that would run whenever an AJAX request for new HTML completed:

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

This was great until I had a bit of HTML that was loaded that, contained within the specified element, included some scripts that needed to be run, so I changed it to this:

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

I have read that jQuery will evaluate any scripts with the HTML string argument of the html() function - however, it seems the issue is that the scripts are stripped before this call. Having had a look through firebug the following seems to be happening:

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

Does anyone have any suggestions? Thanks in advance.

最满意答案

快速测试（小提琴） ，给出以下标记为字符串：

<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

Did a quick test (fiddle), given the following markup as string:

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

jQuery will produce an object like

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

[0] will contain all of the html in #root except for the script, the scripts are separated into their own objects. This seems to be true for all scripts within the markup.

So you could do something like this to run the script:

var $new = $(dynamicContent); // dynamicContent is string var $desired = $new.find('.desiredElement'); $new.eq(1).appendTo('body'); // run the script