jQuery UI對話框的行爲不可預測

jQuery UI對話框讓我感覺很不舒服。據我所知，以下是它的工作原理：jQuery UI對話框的行爲不可預測

當你做$('#myDialog').dialog({...})時，它複製#myDialog元素並將其移動到body標記底部的這個奇怪的小部件內部。這太瘋狂了！當它執行此操作時，它會複製可能的唯一DOM元素（帶有ID）。

所以我想要做的就是當我刷新原始元素（#myDialog）的HTML時，讓它以可預測的方式工作。如果我這樣做動態，有時對話框不打開任何更多：

或者有時對話與舊的HTML打開（因爲它在頁面這樣的底部緩存）。這怎麼了？

2011-08-17 Milimetric

爲什麼你不只是調用$（「＃dialogId」）對話框（「毀滅」）在關閉功能，像這樣：

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
}

的破壞作用將刪除裝飾代碼，您的在下次顯示對話框時，對話框元素將不會重複。

我向jsfiddle.net example添加了示例代碼。

來源

2014-05-05 04:39:09 binhgreat

你可以發佈一個例子js小提琴這個工作嗎？上次我嘗試它時，銷燬破壞了對話框，我不得不重新創建它。這也不好。 – Milimetric

我用js小提琴更新了答案 – binhgreat

嗯，我討厭成爲一個堅持者，但這個例子並不完全覆蓋我在這裏發佈的問題。請注意，在jsfiddle中，您可以發佈到echo ajax請求（'/ echo/html /'）來模擬我遇到的更多問題。 – Milimetric

由於沒有人似乎有任何想法如何馴服這個怪獸對話，這是我迄今爲止最好的事情。我會接受任何優越的選擇。

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
});

整個瘋狂的目的是保持原始對話框的HTML在頁面上唯一。我不確定爲什麼這不能成爲對話框的內置行爲......實際上，我不明白爲什麼jQuery UI需要克隆HTML。

來源

2011-10-19 19:05:56 Milimetric

我遇到了動態加載Hicharts的問題，並且第二個模態觸發器沒有顯示圖表。我研究了其他可能的解決方案，但這是唯一有效的解決方案。謝謝！ –

不客氣:)我不敢相信到今天我的醜陋的黑客仍然比默認的對話行爲更好。 – Milimetric

我知道這已經公佈了一段時間，但要處理這個問題不太廣泛的方法是：

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove();

這是由於對話框控件希望能夠控制顯示和將包裹原始對話框的內容然後在身體的底部創建一個全新的對話框。

這個解決方案的缺點是對話框必須是第一個被初始化的，以確保所有第三方庫小部件都能正常運行。

來源

2014-04-09 22:27:16

是的，如果你不想在頁面生命週期開始時花費時間創建對話框，這可惜不起作用。我發佈這個問題已經很長時間了，謝謝你的回答！我認爲這很瘋狂，儘管時間很長，但問題仍然存在，並且jQuery UI團隊沒有跡象表明他們想要解決這個問題。這是該框架最奇怪的事情之一。 – Milimetric

打開對話框之前，需要清空對話框。

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
}

來源

2017-09-22 08:07:17

jQuery UI對話框的行爲不可預測

回答

相關問題