Question

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

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

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

Answer 1

id必须是唯一的！您使用相同的test id =＆gt;创建多个div 无效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");
  });

docs site中的

#id选择器评论：

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

Answer 2

您应该为每次点击提供不同的ID，否则请使用名称相似的类。

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

Jquery动态创建了可拖动的div

2 个答案: