3

私のプロジェクトでは、ボタンをクリックするたびに jquery で動的に div を作成しています。これらの新しい div には、ドラッグ可能でサイズ変更可能なプロパティが必要です。これまでに行ったことは次のとおりです。

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

このコードは何とか機能します。問題は、作成された最初の div のみがサイズ変更およびドラッグ可能であることです。また、これらの新しく作成された div を削除するために別のボタンを配置することは可能ですか?

4

2 に答える 2

5

idユニークでなければなりません！同じIDで複数のdivを作成するtest=>無効なHTML

もう1つ、DOMにクエリを実行する必要はありません。取得した参照を使用して、作成したものを作成でき<div> resizableますdraggable。

$("#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を使用する複数の要素を持つドキュメントは無効です。

于 2012-04-25T07:31:17.313 に答える
1

クリックごとに異なる ID を指定するか、類似した名前のクラスを使用する必要があります。

$("#button1").click(function(){
     $("<div/>", {
       "class": "test",
        text: "",
      }).appendTo("body");
     $( ".test" ).resizable();
     $( ".test" ).draggable();
  });
于 2012-04-25T07:33:13.407 に答える