Jquery 动态创建可拖动的 div

Question

在我的项目中，我每次单击按钮时都会使用 jquery 动态创建 div。现在我希望这些新的 div 具有可拖动和可调整大小的属性。这是我到目前为止所做的:

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

此代码以某种方式工作，问题是只有创建的第一个 div 是可调整大小和可拖动的。也可以放置另一个按钮来删除这些新创建的 div 吗？

Answer 1

id一定是独一无二的!您使用相同的 test 创建多个 div id => 无效的 HTML

另一件事，你不需要查询 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 docs site 中的选择器注释:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.