Jquery 동적으로 draggable div를 만들었습니다

Question

내 프로젝트에서 jquery로 동적 div를 만들 때마다 버튼을 클릭 할 때마다. 이제이 새로운 div에 드래그 가능하고 크기를 조정할 수있는 속성이 필요합니다. 다음은 필자가 지금까지 무슨 짓입니다 :

$("#button1").click(function(){ 
    $("<div/>", { 
     "id": "test", 
     text: "", 
     }).appendTo("body"); 
    $("#test").resizable(); 
    $("#test").draggable(); 
    }); 

이 코드는 어떻게 든 작동, 문제는 생성 된 첫 번째 DIV는 크기 조정 및 드래그 할 것입니다. 또한 새로 만든 div를 삭제하기 위해 다른 버튼을 넣을 수 있습니까?

Answer 1

id은 고유해야합니다. 동일한 test ID로 여러 된 div를 만들 =>INVALID HTML

또 다른 것은, 당신은 당신이 만든 <div>resizable 및 draggable을있어 참조 사용할 수 있습니다, DOM을 조회 할 필요가 없습니다

를

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test", 
     text: "", 
     }).resizable().draggable() 
     .appendTo("body"); 
    }); 

당신은 어떤 이유로 ID를 사용하고자하는 경우 :에서

var counter = 1; 

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test" + (counter++), 
     text: "", 
     }).resizable().draggable() 
     .appendTo("body"); 
    }); 

#id 선택 코멘트:

각 id 값은 문서 내에서 한 번만 사용해야합니다. 두 개 이상의 요소에 동일한 ID가 할당 된 경우 해당 ID를 사용하는 쿼리는 DOM에서 첫 번째로 일치하는 요소 만 선택합니다. 그러나이 동작에 의존하면 안됩니다. 동일한 ID를 사용하는 두 개 이상의 요소가있는 문서가 유효하지 않습니다.

Answer 2

당신은 답을 .. 각각 비슷한 이름을 가진 모든 클릭하거나 다른 용도 클래스

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test", 
     text: "", 
     }).appendTo("body"); 
    $(".test").resizable(); 
    $(".test").draggable(); 
    });