jquery - JS 脚本何时执行，如果它们使用 jQuery .html() 函数加载？

Question

我试图弄清楚当使用 .ajax() jQuery 函数加载 HTML + JS 内容并使用 .html(content)< 插入内容时 JavaScript 何时执行。我读过有关 domManip 的内容，阅读

• curious about jquery .load() ,
• Load script tag from the file html ,
• jQuery .load() / .ajax() not executing javascript in returned HTML after appended ,
• jQuery .load() html content and execute script ,
• When is a DOM script loaded by jQuery/Ajax actually executed?
• 还有更多...

我学到了很多东西，但还没有发现脚本何时运行:

1. jQuery 会在解析并插入 HTML 后运行脚本吗？ (所以我可以在 JS 中引用加载的 HTML 中的每个 DOM 对象)
2. jQuery 会按照遇到的顺序运行脚本吗？当脚本与 src 一起加载时会发生什么？

例如，这是由 .ajax() 加载的 HTML，然后用 .html() 插入:

<p id="p1">Lorem ipsum...</p>
<script type="text/javascript" src="file.js">
<p id="p2">Dolorem...</p>

在我的计算机上，在三个浏览器上，在 file.js 中，我可以引用 #p2 并且一切正常。

Answer 1

查看未压缩形式的 jQuery 1.11.0 源代码，很明显脚本将被 jQuery 检测到，并使用 eval() 执行。 。

引自domManip功能:

// Evaluate executable scripts on first document insertion
for ( i = 0; i < hasScripts; i++ ) {
    [...]
    if ( node.src ) {
        // Optional AJAX dependency, but won't run scripts if not present
        if ( jQuery._evalUrl ) {
            jQuery._evalUrl( node.src );
        }
    } else {
        jQuery.globalEval( ( node.text || node.textContent || node.innerHTML || "" ).replace( rcleanScript, "" ) );
    }
    [...]
}

所以它们实际上会按照遇到的顺序执行。正如您所看到的，这仅适用于内联脚本。因此，在您的示例中 file.js ，我最初的答案的前一部分是:

原因可以引用p2是在插入 HTML 片段后，浏览器将发出第二个常规 HTTP 请求来加载该文件。尽管如此，这仍然是一种竞争条件，但却是一个非常节省的条件，因为第二个 p 的解析总是比从服务器加载另一个 JavaScript 文件更快。

---

下面是旧的且不正确的假设。

<罢工> 在我看来，jquery 将不会运行您插入的任何 jquery 脚本。浏览器会。因此，它们按照插入的顺序执行。

我的推理是 <script> tag只不过是jquery的另一个DOM节点。它没有理由在那里寻找任何可执行文件——这是 JavaScript 解析器的工作(它是浏览器的一部分)。