遞歸銷燬jQuery UI對話框的內容

Question

我的代碼打開了一個jQuery UI對話框，並使用AJAX加載內容。在對話框中正在初始化其他幾個小部件。當對話框關閉時，我銷燬（）和刪除（）它的div，但它不會銷燬裏面的小部件。

如何在對話框關閉時正確刪除mydiv中的所有元素？

// mydiv contains variable content 
mydiv.dialog({ 

    autoOpen: true, 
    close: function(){ 
     // destroy mydiv and all widgets inside it 

     mydiv.dialog('destroy').remove(); 

     alert('Unfortunatelly, inner dialog remained. How to get rid of ALL widgets placed inside "mydiv?"'); 
     // How do i destroy everything inside? 
    }   
}); 

互動樣本：http://jsfiddle.net/r4cHY/4/

謝謝！

Answer 1

我解決了我自己的問題。 jQuery UI對話框的實現將指定完全從它的父項中移除，並將其移動到可以更好定位的位置。不幸的是，在打開對話框的上下文和小部件之間不再有聯繫，這就是爲什麼銷燬內容不會影響對話框。

更好的小提琴：http://jsfiddle.net/gxXBY/

這導致了各種複雜的UI系統內部的負面影響，我相信是在jQuery UI的一個bug。這裏是一個修復：

var oldcr = $.ui.dialog.prototype._create; 
$.ui.dialog.prototype._create = function(){ 
    var self=this; 
    $('<div/>').insertBefore(this.element).on('remove',function(){ 
     self.element.remove(); 
    }); 
    oldcr.apply(this,arguments); 
}; 

把這個添加到你的javascript的任何地方，它會修復所有的對話框。爲我完美工作。