如何在更改内容后使用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
});