Изменение 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(); 
} 

Но тогда, я пытался использовать его с DIV, созданный JavaScript:

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

Измените свой объект dom на объект jQuery, вызвав $(newdiv) и повторно инициализируя функциональность 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

Ну вы должны инициализировать resiazble плагин на новый DOM элементы. У вас уже есть несколько JS решения, поэтому я вывешу еще одну версию с помощью JQuery для создания элементов:

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

еще один тонкий вы должны знать: вы не должны дублировать идентификаторы, они должны быть уникальными. Поэтому вместо нескольких #resizable используйте классы .resizable.