동적으로 추가 요소는

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 사업부를 만들 필요가 간단합니다. 이 목적을 위해 내가 가진 코드와 같은 아래

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

그러나 정적 요소 아이디 #draggable 같은 동적으로 추가 된 div 작동하지 않을 것이

내가 링크 이러한 외부 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 행동으로 초기화 될 것입니다. 그리고 다른 동적 요소는이 초기화가 없습니다.

그래서, 당신은 또한 당신이 클래스를 선택 대신 ID 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(); 
     }); 

을 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>');  
    });