如何在更改其內容後使用Jquery UI調整div的大小？

Question

我正在使用Jquery UI來允許用戶調整帶有視頻播放器的div的大小。 這是代碼的摘錄：

<script type="text/javascript"> 
    $(function(){ 
    $("#stream").resizable({ 
    containment: "#content", 
    minHeight: $('#content').height(), 
    maxWidth: ($('#content').width()/1.3) 
    }); 

}); 
</script> 

<div id="stream"> 
<!-- Flash video player stuff --> 
</div> 

這工作時，頁面呈現如預期。問題是，當我觸發與改變「#stream」 div的內容的事件：

#('#stream').html(<--!Code for another video player-->); 

這樣的調整大小控制後消失，即使我調用$("#stream").resize()又是似乎沒有工作。

我做錯了什麼或者我需要使用某種工作？

Answer 1

即使#content本身發生變化，該小部件仍將在創建時指定的參數下運行。您可以完全destroy窗口小部件並重新創建：

$("#stream").resizable("destroy").resizable({ 
    containment: "#content", 
    minHeight: $("#content").height(), 
    maxWidth: $("#content").width()/1.3 
}); 

，或較少侵入，使用option方法來更新其運行參數：

$("#stream").resizable("option", { 
    minHeight: $("#content").height(), 
    maxWidth: $("#content").width()/1.3 
}); 

Answer 2

可以在#stream如

添加額外的元素

<div id="stream"><div class="cnt"></div></div> 

並通過致電

更新內容

$('#stream div.cnt').html(<--!Code for another video player-->);