在页面上追加/添加后添加jquery ui功能可拖动/调整大小答案

【问题标题】：Add jquery ui function draggable/resizeable after appending/adding it on the page在页面上追加/添加后添加jquery ui功能可拖动/调整大小
【发布时间】：2012-04-25 03:25:23
【问题描述】：

我的网页有问题，当用户单击特定按钮时，我正在文档中添加一个元素。

元素是

<div class="draggableResizable">
  Some text
</div>

script.js

$('#button').click(function() {
  $("#pageWrap").append(element)
})

$('.draggableResizable').draggable().resizable()

欢迎提出任何建议。

谢谢。

【问题讨论】：

标签： jquery-ui jquery-ui-draggable jquery jquery-ui-resizable

【解决方案1】：

只需重组，以便在添加元素后初始化小部件：

$('#button').click(function() {

    //create an element
    var $element = $('<div class="draggableResizable" />').text('some text');

    //append it to the DOM
    $("#pageWrap").append($element);

    //make it "draggable" and "resizable"
    $element.draggable().resizable();
});

这是一个演示：http://jsfiddle.net/ZSgBP/1/

【讨论】：

如果你愿意，你也可以把它做成一个单行：$("#pageWrap").append($('<div class="draggableResizable" />').text('some text').draggable().resizable());
对我来说，在你的 jsfiddle 演示中，可调整大小不起作用

【解决方案2】：

如果您想在将对象添加到 DOM 后将事件添加到对象，则需要使用 .on() 或 .live() 函数。如果您不想使用这些功能中的任何一个，您可以简单地将 div 添加到 HTML，然后在页面加载时将其隐藏并在其上调用 .show()。

【讨论】：