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对象，并重新初始化新内容上的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并且很可能会导致其他问题。

最后，在创建新内容以首先操作它并最后将其添加到页面时，这是一个好主意。在这种情况下，您将在新创建的div中添加更多内容。我会首先执行此操作，然后在完成后将其添加到页面中。

Answer 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/

Answer 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类。

将JavaScript更改为jQuery - createElement

3 个答案: