动态加载的 javascript 在第二次加载时不起作用答案

【问题标题】：Dynamically loaded javascript doesn't work second time loaded动态加载的 javascript 在第二次加载时不起作用
【发布时间】：2013-03-10 12:40:39
【问题描述】：

我正在开发一个网页，该网页使用 JQuery UI 对话框（模式模式）来显示使用 Django 动态生成的表单。基本流程是：

用户点击按钮
jquery（使用 AJAX）发出一个 get 请求，该请求返回表单的 html，然后用于填充对话框
- html 包含一个脚本标签，用于处理表单上的某些 UI，这些 UI 可以正常加载并按预期工作
用户填写表单并单击“完成”并提交表单。

当用户在表单上出错时，问题就出现了。服务器响应 post 请求（提交表单），修改了原始表单（包括脚本）以显示错误。第二次加载脚本时，它会收到“Uncaught ReferenceError: $ is not defined (anonymous function)” 脚本与之前运行正常时完全相同。在整个过程中要清楚，页面永远不会刷新。

这里是处理模态的 javascript 的要点：

var add_container = $("#add_container");

add_container.dialog({...})

function show_form(form,response_func) {
    add_container.html(form);
    add_container.dialog("open");
    $("#add_form").submit(function (event) {
        return submit_form($(this),response_func);
    });
}

function submit_form(form,response_func) {
    add_container.append('<p>Adding...</p>');
    //this is a trick to upload a file without reloading the page
    form.attr('target','upload_target');
    $('#upload_target').load(function() {
        var response = $('#upload_target').contents().find('body').html();
        add_container.dialog("close");

        resp_obj = $(response)
        if (resp_obj.is('form')) {
            //***this is what reloads the form when there is an error
            show_form(response,response_func);
        } else {
            response_func(resp_obj);
        }

    });
}

$('#add_link').click(add_link);
function add_link() {
    $.get('/add_link', function(data) {
        function add_response(response) {
            //handle successful submission
        }
        show_form(data,add_response);
    });
}

//...more stuff that is not important

这是从 /add_link 返回的 html 的要点

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- Dynamically generated form here !-->
</form>

add_form.js 是一个非常标准的使用 jQuery 的 javascript 文件。它以 $(document).ready(function () {...} ) 开头，第一个 $ 是 ReferenceError 发生的地方

表单需要根据点击的内容动态生成，所以我不能将所有内容都静态地放在页面上。该脚本不是动态生成的，因此不一定需要动态加载，但我不确定如何将其保存在自己的文件中，并且仅在加载表单时运行。我愿意接受有关实现相同效果的替代方法的建议。

【问题讨论】：

标签： javascript jquery ajax django jquery-ui

【解决方案1】：

您的表单操作指向与包含 jQuery 框架脚本等的路径不同的相对路径。

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<!-- src="/scripts" -->

<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- action="/add_link" -->

要确保它在提交表单后加载框架，只需使用浏览器上的开发人员工具之类的工具并检查 jQuery 脚本 src 的 head 标签。还在吗？

【讨论】：

我仔细检查了表单提交后jQuery脚本肯定还在。我看到了脚本，我也可以在控制台中输入“$”，它不会给出错误。这是有道理的，因为没有页面刷新。
不过你的回复让我想到了一个主意。脚本是否可以在表单提交到的 iFrame 内执行，因为响应会返回到 iFrame，然后主 javascript 会抓取它？如果是这样，我将如何防止这种情况发生？

【解决方案2】：

感谢 MelanciaUK，我意识到当我将表单提交到 iFrame 时，响应首先被发送到脚本将运行的地方并出错，因为 iFrame 被视为自己的页面并且无法访问加载的 jQuery在主页上。

我决定通过消除 add_form 脚本的动态加载来解决这个问题，并像我的所有其他脚本一样在页面加载时简单地加载它。我创建了一个自定义 jQuery 事件（使用.trigger），以便仅在打开添加表单时运行脚本。这正是我想要的方式。

希望这对遇到类似问题的人有所帮助。如果您有任何问题，请随时提出！

【讨论】：