动态添加的元素无法拖动

Question

我使用下面的快照添加了动态内容

var obj = {"Test Tube": "test.png","Beater": "beat.png"};
    $.each( obj, function( key, value ) {
        $(".instruments").append('<div class="tile bg-gray">'
                                    +'<div class="tile-content image">'
                                        +'<img src="'+value+'">'
                                    +'</div>'
                                    +'<div class="brand">'
                                        +'<span class="label fg-white">'+key+'</span>'
                                    +'</div>'
                                    +'</div>');
    });

    $(".tile").click(function(){ 
        var imgSelected = $(this).find("img").attr("src");
        $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');      
    });

现在我需要将新添加的#draggable div 设为可拖动元素。为此，我有如下代码

$(function() {
$( "#draggable" ).draggable();
});

但它适用于静态元素不适用于动态添加的 divs，如 id #draggable

我有 link 这些外部 js 和 css

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

我不知道为什么这对动态 divs

是错误的

Answer 1

问题是，

$(function() {
     $( "#draggable" ).draggable();
});

等同于 $( document ).ready()。因此，当调用此方法时.. 只有那些当时存在的元素将被初始化为 draggable behavior.And 其他动态元素将没有此初始化。

因此，添加这些动态元素后，您必须重新初始化 draggable，

 $(".tile").click(function(){ 
            var imgSelected = $(this).find("img").attr("src");
            $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');   
            $( "#draggable" ).draggable();
        });

另外，我建议您使用 class 选择器而不是 id 选择器来初始化 draggable .

查看此代码块，id 参数似乎在 DOM 中重复，这不是好的做法。 id 是唯一的，这将导致只有一个元素是 draggable.

 $(".tile").click(function(){ 
        var imgSelected = $(this).find("img").attr("src");
        //FIXME : Chance of Duplicate id
        $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');      
    });

动态添加的元素无法拖动

Dynamically added element is fail to draggable

jquery-ui

jquery-ui-draggable