在動態加載的對話框中執行Javascript

Question

我有關於讓JavaScript在對話框內正確激發的問題。

下面是我scripts.js中的代碼至極我目前使用的對話框中默認加載對話框

function LoadDialog(url, title) { 
    var DialogBox = $('<div class="dialog-container"></div>').dialog({ modal: true, autoOpen: false, resizeable: true }).dialog({ width: 500, height: 'auto' }); 
    DialogBox.html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>').dialog({ buttons: null, title: 'Loading..' }); 
    DialogBox.dialog('open').load(url, function() { 
     DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } }); 
    }); 
} 

$(function() { 
    $('.as-dialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title')); return false; }); 
}); 

雖然沒有javascript代碼火災。例如我加載一個不顯眼的驗證小表單到對話框中。沒有身體，頭等，只有一個容器格和形式本身。默認情況下驗證不工作，如果我添加在script.js $（function（）{}）下的表單事件處理程序它不會觸發。如果我添加下面的JS引用和代碼塊用來裝載它的工作原理與一個問題的形式：

<script src="/Scripts/libs/jquery.validate.min.js"></script> 
      <script src="/Scripts/libs/jquery.validate.unobtrusive.js"></script> 
      <script type="text/javascript"> 
       $(function() { 
        $('#form_Create').submit(function (e) { 
         e.preventDefault(); 
        }); 
       }); 
      </script> 

關於上面的代碼中的非功能是驗證永遠是可行的，但如果我打開的對話框中，將其關閉，然後再次打開它，preventdefault將停止工作，表單將發佈。這可能是一個腳本問題或多重負載？雖然如果放置在scripts.js中，沒有'doc ready'代碼在對話框中工作（標準JavaScript函數可以工作），但我沒有其他選項。 有沒有更好的方式來處理動態加載的文件內的JavaScript或我必須將整個表單放在父頁面中才能夠可靠地對付它們？ 你應該如何處理這個問題的任何輸入？

Answer 1

下面的方法來打開對話框似乎已經解決了我的首要問題：

var Box = $('#dialog-container'); 
    if (Box.length === 0) { 
     Box = $('<div id="dialog-container"></div>').appendTo('body'); 
    } else { Box.empty(); } 

不確定ATM如果空（）是必要的，因爲無論如何，這似乎是負載。但是通過這段代碼，我可以打開多少次我喜歡的對話框，並且代碼塊仍然可以執行。

雖然我的問題是關於如果我必須從加載的頁面中調用某些腳本文件或者從父文件加載的文件啓用腳本運行的更好方法。但至少現在一切似乎都奏效了。

Answer 2

小提琴確實是值得歡迎的，但對於一個開球：

DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } }); 

此行可能是一個問題，如果我們將一些格式，並打破它：

var obj = {}; 
obj.title = title; 
obj.Buttons = null; 
obj.position = 'center'; 
obj.close = function(ev,ui) 
{ 
    $(this).dialog("destroy");//-->this will point to obj!! 
}; 
DialogBox.dialog(obj); 

我想你想要的是this指向什麼，通常被稱爲that或_self。

或者，你可以做的就是創建一個封閉，以保持在其中創建對象的上下文的引用：

obj.close = (function(that) 
{ 
    return function(ev,ui) 
    { 
     that.dialog("destroy"); 
    }; 
})($(this)); 

也許這無關你的問題是什麼，但剛需在安全方面：建立一個小提琴