無法在新元素上調整大小的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);