无法在新元素上调整大小的jQuery UI

Question

我正在尝试使对话框元素可通过jquery UI（最新）调整大小，我在文档中包含了jquery主题css和最新的Jquery UI库。

但是，当我创建对话框HTML并将其插入文档时，可调整大小的函数不会调整大小，可以看到调整大小的光标，并且可以看到调整大小的句柄，但是当我拖动时什么也没有发生！

当我在对话框中手动插入对话框的HTML代码并为该对话框应用resizable（）插件时，resizable（）函数就起作用了！

但是当我为对话框插入HTML代码时

$('body').append($('<div id="dialog">some text</div>')); 然后执行以下操作：

$('#dialog').resizable();

手柄可见，但不会调整大小。

似乎resizable（）插件不适用于DOM中的新元素吗？

我浪费了整整一天的时间寻找解决方案:(

有人知道发生了什么！

**编辑**

我找到了！！ resizable（）插件在resizable元素上触发事件“ resize”，并且我的插件具有该事件的侦听器，我以为仅在调整窗口大小时才触发该事件。

现在，我需要更改我的插件，并确定窗口是否正在调整大小或其元素。 谢谢大家！

Answer 1

您必须使用jquery ui的css或进行以下操作：您可以在没有css文件的情况下工作，但必须将css放在div元素上。

看这段代码：

导入jQuery UI的CSS：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

js代码：

<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<div id="dialog" style="border:1px solid black;height: 100px;left: 0;top: 0;width: 100px;">some text</div>');
    $('#dialog').resizable();
});
</script>

Answer 2

给元素一点时间渲染

    setTimeout(function(){
        $('#dialog').resizable();
    },500);