jquery - 将 .draggable() 和 resizable() 分配给动态创建的 div

Question

昨天我得到了如何制作具有不同 id 的 div 的答案。但是这些 div 需要可拖动和调整大小。我用 jqueryUI 做到了这一点，但我找不到在下一段代码中实现它的方法（因此，对于每个生成的 div，它需要双向添加 .resizable 和可拖动）：

var c = 0;
$('#add_txt').on('click', function(){
    $('#vk_main').append('<div id="vk_text_'+ (c++) +'">TEST</div>');
});

因此，对于每个 div “vk_text_somenumber”，必须分配属性：.draggable().resizable(); . 我试图这样做，但我得到的只是#vk_main 可拖动，仅此而已。

Answer 1

var c = 0;
$('#add_txt').on('click', function(){
    var $div = $('<div id="vk_text_'+ (c++) +'">TEST'+c+'</div>');
    $('#vk_main').append($div);
    $div.draggable();
    $div.resizable();
});​

Answer 2

页面加载完成后，您需要将 Draggable 事件附加到该 div。这样您就可以轻松拖动它。（我不知道你什么时候调用点击方法。但你需要在页面加载中附加事件）

$(document).ready(function() 
{
var c = 0;
$('#add_txt').on('click', function(){
    $('#vk_main').append('<div id="vk_text_'+ (c++) +'">TEST</div>');
    $('#vk_text_' + (c++)).draggable(); // (c++) is your random number which is concated with Div
});
}