Jquery 动态创建可拖动的 div答案

【问题标题】：Jquery dynamically created draggable divsJquery 动态创建可拖动的 div
【发布时间】：2012-04-25 07:29:21
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html jquery-ui-draggable dynamically-generated

【解决方案1】：

id 必须是唯一的！您创建多个具有相同 test id => 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");
  });

docs site 中的#id 选择器注释：

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

【讨论】：

感谢您的回答！那么如何使用一个按钮为每个 div 创建不同的 id？
@lucky13。您可以使用变量来存储计数器查看更新。或者只使用类。
非常感谢！现在一切正常！现在的另一个问题.. 是否可以添加另一个按钮以删除所有创建的 div？
@lucky13。你应该先问一个问题，再问另一个问题，我或其他人会很乐意为你提供帮助。

【解决方案2】：

您应该为每次点击提供不同的 id，否则使用具有相似名称的类..

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

【讨论】：