在jQueryUi對話框中動態加載jQueryUi標籤不起作用

Question

我有一個Ruby和Rails應用程序。

我正在使用Ajax加載表單。該表單是現有的導軌視圖。該表單反過來包含jQueryUi選項卡。

不幸的是，當表單加載到jQuery對話框中時，不會顯示這些選項卡。

下面是對話框

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').tabs(); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

代碼奇怪的是，如果我改變像下面的代碼，卡口都出現，但只有當我點擊選項卡。

$('#create_candidate').click(function(e) { 
    var url = $(this).attr('href').replace('?','.js?'); 
    var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); 

    new_candidate_dlg.load(url); 

    new_candidate_dlg.dialog({ 
     autoOpen:false, 
     width: 'auto', 
     height: 'auto', 
     modal: true, 
     close: function() { 
     $('new_candidate_dlg').remove(); 
     }, 
     open: function() { 
     $('#tabs').live('click', function(){ 
      $(this).tabs() 
     }); 
     } 
    }); 
    new_candidate_dlg.dialog('open'); 
    e.preventDefault(); 
    }); 

Answer 1

您有計時問題。執行順序很可能將是這樣的：

1. new_candidate_dlg.load(url)
2. new_candidate_dlg.dialog(...)。
3. new_candidate_dlg.dialog('open')。
4. .load(url)完成並將HTML加載到new_candidate_dlg中。

所以對話框的open回調執行時，沒有可用的#tabs元素和$('#tabs').tabs()調用不起任何作用。你想後load加載HTML和load的標籤綁定有一個回調，您可以使用的只是目的：

new_candidate_dlg.load(url, function() { $('#tabs').tabs() }); 

，然後從您的通話new_candidate_dlg.dialog({ ... })刪除open回調。

此回調的工作原理：

open: function() { 
    $('#tabs').live('click', function() { 
    $(this).tabs() 
    }); 
} 

因爲你使用live click事件（所以#tabs沒有，當你調用$('#tabs').live()存在的），你將不會被點擊任何東西，直到它在網頁上，準備好了。

Answer 2

我是編碼方面的新人，但我會給它一個鏡頭。你可能在你的關閉函數中缺少一些東西來標識元素（＃爲id attr），或者你錯誤地陳述了你之前聲明的變量。另外，我認爲你的.dialog（）調用應該和你的.click（）事件處理程序分開，也就是說你的腳本早一點。

我通常會看到e.preventDefault（）;在事件功能的頂部。您打開方法的電話應該用雙引號。

第二個示例在單擊選項卡時正在工作，因爲它將.tabs（）方法作爲單擊事件處理程序進行觸發。 （live（）已棄用，如果您使用jQuery比1.7更新）

您可以在對話框中發佈html嗎？它會幫助我嘗試提供更好的答案。