我有一个 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() 是否有什么东西阻止了它的工作?
最佳答案
作为 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 代码。无需加载脚本。
关于当从 jQuery load() 调用 URL 时,javascript 未从 django 模板加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33421048/