动态加载的JavaScript不会工作第二次加载

我正在使用JQuery UI对话框（在模式模式下）显示使用Django动态生成的窗体的网页上工作。基本流程是：动态加载的JavaScript不会工作第二次加载

用户点击一个按钮
的jQuery（使用AJAX）发出返回的HTML，然后用来填充对话框
- HTML中包含表单的GET请求一个脚本标记，处理一些用户界面的表格加载罚款和按预期工作
用户比填写表格，并单击“完成”，并提交表单。

问题出现在用户在表单上发生错误时。服务器响应发布的请求（提交表单），并修改原始表单（包括脚本）以显示错误。这第二次脚本加载它得到一个“未捕获ReferenceError：$未定义（匿名函数）”该脚本是完全一样的，因为它以前工作正常。在整个过程中要清楚，页面永远不会刷新。

这里是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

这是HTML的要点从/ add_link返回

<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是一个漂亮的标准的JavaScript文件，使用jQuery。它以$（document）.ready（function（）{...}）开头，第一个$是ReferenceError发生的地方

表单需要根据点击的内容动态生成，所以我不能将所有内容静态放在页面上。该脚本不是动态生成的，因此它不一定需要动态加载，但我不确定如何将它保留在自己的文件中，并且只有在加载表单时才会运行它。我愿意提供替代方法来达到同样的效果。

来源

2013-03-21 techwes

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

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

希望这可以帮助任何有类似问题的人。如果你有任何问题随时问！

来源

2013-03-24 05:03:44 techwes

你的表单动作指向包含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。它还在吗？

来源

2013-03-21 16:56:47 melancia

我重复检查和表单提交后，jQuery脚本肯定仍然存在。我看到了这些脚本，我也可以在控制台中键入'$'并且不会给出错误。这是有道理的，因为没有页面刷新。 – techwes 2013-03-23 19:21:31

但是，您的回复让我想到了一个想法。该脚本是否可以在表单提交给的iFrame内部执行，因为响应会返回到iFrame，然后主javascript抓住它？如果是这样，我会如何防止呢？ – techwes 2013-03-23 19:22:44

动态加载的JavaScript不会工作第二次加载

回答

相关问题