将 JavaScript 更改为 jQuery - createElement答案

【问题标题】：Changing JavaScript into jQuery - createElement将 JavaScript 更改为 jQuery - createElement
【发布时间】：2015-01-15 18:22:45
【问题描述】：

我正在尝试使用可拖动和可调整大小的 jQuery 函数，但我可能需要将这段代码的一点点更改为 jQuery。

我有这个 HTML 代码：

<div id="resizable2" class="ui-widget-content">
    <h3 class="ui-widget-header">MS</h3>
</div>

这对 jQuery 很有效：

 $(function() {
    $( "#resizable" ).draggable();
    $( "#resizable" ).resizable();
}

然后，我尝试将它与 javascript 创建的 div 一起使用：

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    document.body.appendChild(newDiv);
    newDiv.appendChild(h);  
    newDiv.className = "ui-widget-content";
    h.appendChild(text);   
    h.className = "ui-widget-header";
    newDiv.id = "resizable";
}

它不工作

【问题讨论】：

不工作怎么办？你能发个fiddle 让我们看看问题所在吗？
在当前元素上调用draggable() 和resizable()。当您创建一个新元素时，您必须手动使它们也可拖动和调整大小。除此之外，你不能创建与现有元素具有相同 id 的元素（你可以，但你不应该）
Javascript 以线性方式执行，这意味着您声明函数的顺序会影响调用它们的时间。要使新的 div 可调整大小，您必须在创建后对其调用 draggable() 和 resizeable() 方法 - 就像下面的答案一样。

标签： javascript jquery html jquery-ui dom

【解决方案1】：

通过调用 $(newdiv) 将您的 dom 对象更改为 jQuery 对象，并在新内容上重新初始化 resizable 和 draggable 功能。

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    newDiv.appendChild(h);  
    newDiv.className = "ui-widget-content";
    h.appendChild(text);   
    h.className = "ui-widget-header";
    newDiv.id = "resizable";
    $(newDiv).resizable(); //Add this
    $(newDiv).draggable(); //and this

    document.body.appendChild(newDiv); //Append to the dom once you've finished with it.
}

正如 devqon 所提到的，这样做的原因是该函数添加了动态内容（页面加载时不存在的内容），这意味着该新内容上不存在可拖动和调整大小的功能。这就是为什么您需要重新初始化新元素和功能之间的连接。

还提到不要重复使用 ID，它们必须是唯一的。对多个元素使用相同的 id 是不好的做法，而且很可能会导致其他问题。

最后，创建新内容时最好先对其进行操作，然后在最后将其添加到页面中。在这种情况下，您将在新创建的div 中附加更多内容。我会先这样做，然后在完成后将其添加到页面中。

【讨论】：

【解决方案2】：

您好，我已将您的功能更改为：

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    newDiv.id = "resizable";
    newDiv.className = "ui-widget-content";
    h.className = "ui-widget-header";
    h.appendChild(text);   
    newDiv.appendChild(h);  

    document.body.appendChild(newDiv);

}

我已经创建了一个 jsfiddle 供你自己尝试：

http://jsfiddle.net/ttw7218z/4/

【讨论】：

【解决方案3】：

你需要在新的 DOM 元素上初始化 resiazble 插件。你已经有了一些 JS 解决方案，所以我将发布一个使用 jQuery 来创建元素的版本：

function addnewbox() {
    $('<div class="ui-widget-content resizable">' +
          '<h3 class="ui-widget-header">MS</h3>' +
      '</div>').appendTo('body').resizable();
}

还有一点你应该注意的：你不应该重复 id，它们必须是唯一的。因此，不要使用多个#resizable，而是使用.resizable 类。

【讨论】：