Question

我有div容器和内部情侣div，类演示和重力像

<div id="container" style="position:relative;width=400px;height=400px;">
<div class="demo gravity" ></div>
<div class="demo gravity"></div>
<div class="demo gravity"></div>
</div>

我从代码中添加了新的div，如

    var temp = $('<div/>');
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

在onReady函数中我有类似

的代码

$(.demo).resizable().draggable().droppable() ;

它适用于内部的div，但它不适用于我从代码中添加的div。 Div代码显示div内部的id =“container”但不可调整大小/可拖动/可放置。有人知道这是什么问题吗？

Answer 1

问题是你在对所有兄弟姐妹的resizable().draggable().droppable()调用之后添加了新的div 。

你能不能在添加它之前添加它（BTW你可以将所有这些调用链接在一起）：

var temp = $('<div/>'); temp.attr('id', 'foo') .css( { position : 'absolute', top : '0px', left : '0px', width : '200px', height : '40px' }) .addClass("gravity") .addClass("demo") .resizable().draggable().droppable(); $('#container').append(temp);

这是jsfiddle，证明新添加的div实际上有效：http://jsfiddle.net/xqakj/

Answer 2

你也需要为新创建的div做这个：

temp.resizable().draggable().droppable();

Answer 3

这里有一个小例子，好像在工作。

http://jsfiddle.net/ymutlu/cvZpX/2/

如果删除小提琴，

    var temp = $('<div>');
    temp.append("33");
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

var demo = $(".demo");
demo.resizable().draggable().droppable();

//在Jamiec评论后编辑你可以用

temp.resizable().draggable().droppable();

添加临时div。

从代码创建的Div不会加载类

3 个答案: