javascript - ドラッグとサイズ変更の両方の機能を備えた動的に追加された DIV

Question

var total = 0;

function add() 
{
    total++;
    document.body.innerHTML = document.body.innerHTML + '<div id="'+total+'" class="drag"></div>';
    $('.drag').draggable().resizable();
}

add();
add();
add();

http://jsfiddle.net/zVZFq/631/

私が修正したスクリプトは動作しますが (sorta)、問題は、javascript 関数を使用し.dragて要素に動的に追加されるクラスを持つ最後の div が、他の divの機能をクラスに置き換えますが、何らかの理由でそれらの機能を置き換えることではありません。bodyadd() sizable().dragdraggabble()

Answer 1

これは機能します：

var t = 0;

function add() {

    $('body').append('<div id="d'+t+'" class="drag"></div>');
    $('#d'+t).draggable().resizable();
    t++;
}

ここにjsfiddleがあります：http://jsfiddle.net/zVZFq/634/

Answer 2

すでに回答を受け入れていることは知っていますが、それらを一般的なものにして、配列で並べ替えることができます。

var total = 0;
var arr = new Array();
function add() {
    $('body').append('<div class="drag"></div>')
    arr.push($('.drag').eq(total));
    arr[total].draggable().resizable();
    total++;
}

add();
add();
add();

Answer 3

これでうまくいくかもしれません:

function add() {
       total++;
       var myDiv = document.createElement("div");
       myDiv.setAttribute("id",total); 
       document.body.appendChild(myDiv)

       $('#'+total).draggable().resizable();   
       document.getElementById(total).className += " drag";
}