在页面上追加/添加后添加jquery ui function draggable / resizeable

时间:2012-04-25 03:25:23

标签: jquery-ui jquery-ui-draggable jquery jquery-ui-resizable

我的网页上有问题, 当用户点击特定按钮时,我在文档中添加了一个元素。

元素是

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

的script.js

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

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

欢迎任何建议。

谢谢。

2 个答案:

答案 0 :(得分:4)

重新构建,以便在添加元素后初始化小部件:

$('#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/

答案 1 :(得分:0)

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