Jquery动态创建了可拖动的div

Question

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

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

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

Answer 1

id必须是独特的!您创建具有相同testid => INVALID HTML的多个div

另外,你不需要查询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");
  });

#iddocs网站中的选择器评论:

每个id值只能在文档中使用一次.如果为多个元素分配了相同的ID,则使用该ID的查询将仅选择DOM中的第一个匹配元素.但是,不应依赖此行为; 具有多个使用相同ID的元素的文档无效.