Jqueryはドラッグ可能なdivを動的に作成しました

Question

私のプロジェクトでは、ボタンをクリックするたびにjqueryで動的divを作成しています。今、私はこれらの新しいdivにdraggableとresizableプロパティを持たせたい。ここでは、IVEは、これまで行って何です：

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

このコードは、何らかの形で動作しますが、問題が作成された唯一の最初のdivは、サイズ変更可能とドラッグ可能であるということです。 これらの新しいdivを削除するために別のボタンを置くことも可能ですか？

Answer 1

idは一意である必要があります。

：あなたはDOMを照会する必要はありません、あなたはあなたが作成した <div> resizableと draggableを作るようになったリファレンスを使用することができ、同じ test ID => INVALID HTML

もう一つで、複数のdivを作成します

$("#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値は、ドキュメント内で1回のみ使用する必要があります。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリはDOMで最初に一致する要素のみを選択します。しかし、この動作は信頼されるべきではありません。同じIDを使用する複数の要素を持つドキュメントは無効です。答えのためにあなたが似た名前を持つ一人ひとりクリックするか、他の使用クラスごとに異なるIDを与える必要があります

Answer 2

..

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