動態加載的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不會工作第二次加載

回答

相關問題