javascript - 将 JavaScript 更改为 jQuery - createElement

Question

我正在尝试使用可拖动和可调整大小的 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";
}

它不起作用

Answer 1

通过调用 $(newdiv) 将 dom 对象更改为 jQuery 对象，并重新初始化 newdiv 上的 可调整大小 和 可拖动 功能内容。

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 中附加更多内容。我会先执行此操作，然后完成后将其添加到页面。