当从 jQuery load() 调用 URL 时，javascript 未从 django 模板加载

Question

我有一个 django 生成的页面，其中有一个 jQuery on click 处理程序，它使用 jQuery load() 函数加载另一个 django 页面:

$("#loadit").on("click", function() {
  load_it($("#loadit"), url);
});

function load_it(el, url)
{           
    var el_wf = $('<div />');
    el_wf.load(url, function (html, status) {
        el.children().remove();
        el_wf.show();
        el_wf.appendTo(el);
    });             
}                   

在第二个 django 模板中，我有一些如下代码:

<script type="text/javascript" src="/static/scripts/myscript.js"></script>
     .
     .
     .
<div>
   <script>
      function_in_myscript();
   </script>
</div>

当我单击第一页中的元素时，加载第二页时不会调用js函数。没有错误，模板的其余部分将运行并生成页面。

但是如果我直接从浏览器访问第二个 URL，js 函数就会运行。

load() 是否有什么东西阻止了它的工作？

Answer 1

作为 DOM 文本插入的 JavaScript 将不会执行。 W3C Specification for XMLHttpRequest状态:结果文档树中的脚本将不会被执行，引用的资源将不会被加载，并且不会应用关联的 XSLT。

解决方案是对脚本文本调用 JavaScript 的 eval() 函数。使用 jQuery，可以非常轻松地遍历脚本标记集合以及 TextNode 的 eval() 内容。 然而，这看起来是一种不好的做法。

在第二个 html 中使用 script 标签并不是加载新 js 文件的好方法。我建议您使用RequireJS以此目的。 RequireJS 采用与传统标签不同的脚本加载方法。它运行速度快，优化效果好。

这是一个演示用法的示例，在第一个文件中:

<script type="text/javascript" src="/static/scripts/require.js"></script>
    .
    .
    .
<script type="text/javascript">
    require.config({
        paths: {
            myscript: '/static/scripts/myscript'
        }
    });

    $("#loadit").on("click", function() {
        load_it($("#loadit"), url);
    });

    function load_it(el, url)
    {
        var el_wf = $('<div />');
        el_wf.load(url, function (html, status) {
            el.children().remove();
            el_wf.show();
            el_wf.appendTo(el);
            require(['myscript'], function(myscript) {
                function_in_myscript();
            });
        });             
    }
</script>

在第二个 Django 模板中只需加载 html 代码。无需加载脚本。