在页面上添加/添加后添加可拖动/可调整大小的jquery ui函数 [英] Add jquery ui function draggable/resizeable after appending/adding it on the page

问题描述

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

元素是

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

script.js

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

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

欢迎提出任何建议.

谢谢.

解决方案

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

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

I have problem on my webpage, I am adding an element in the document when the user clicks on a specific button.

the element is

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

script.js

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

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

Any suggestions are welcome.

Thank you.

解决方案

Just restructure so you initialize the widgets after adding the element:

$('#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();
});

Here is a demo: http://jsfiddle.net/ZSgBP/1/

这篇关于在页面上添加/添加后添加可拖动/可调整大小的jquery ui函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！