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

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

我已经链接了这些外部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>

我不知道为什么这对动态div来说是错误的

Answer 1

问题是，

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

相当于$( document ).ready()。因此，当调用此方法时，只有那时出现的元素才会被draggable行为初始化。其他动态元素将缺少此初始化。

因此，在添加这些动态元素时，您必须重新初始化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();
        });

此外，我建议您使用类选择器代替 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>');      
    });

动态添加的元素无法拖动

1 个答案: