jQuery UI無法動態創建DOM元素？

Question

我有jQuery UI可拖動和可調整大小的工作。 我正在使用onClick函數按鈕在我的另一個div（#canvas）中創建一個div。 可拖動的工作在我靜態添加的div上，但它不適用於附加onClick函數的div。 知道為什么嗎？

JS

// Draw rectangle
function drawRect(){
    var rectangle = document.createElement('div');
    rectangle.className = 'rectangle ui-draggable ui-resizable ui-selectable';
    rectangle.style.width = "200px";
    rectangle.style.height = "200px";
    rectangle.style.position = "absolute";

    // Define resize handles
    var n = document.createElement('div');
    n.className = 'ui-resizable-handle ui-resizable-n';
    var e = document.createElement('div');
    e.className = 'ui-resizable-handle ui-resizable-e';
    var s = document.createElement('div');
    s.className = 'ui-resizable-handle ui-resizable-s';
    var w = document.createElement('div');
    w.className = 'ui-resizable-handle ui-resizable-w';

    // Build resize handles
    rectangle.appendChild(n);
    rectangle.appendChild(e);
    rectangle.appendChild(s);
    rectangle.appendChild(w);

    // Build div
    document.getElementById("canvas").appendChild(rectangle);
}

jQuery Bind

jQuery(function($) {

    // Make boxes draggable
    $('.rectangle').draggable();

    // Make elements resizable
    $('.rectangle').resizable({

    // Set custom resize handles
    handles: {'n': '.ui-resizable-n', 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'w': '.ui-resizable-w' },

    // Recalculate dimensions from pixels to percentages
    stop: function(e, ui) {
      var parent = ui.element.parent();
      ui.element.css({
          width: ui.element.width()/parent.width()*100+"%",
          height: ui.element.height()/parent.height()*100+"%"
      });
    }
});

HTML

<div id="canvas">
    <div class="rectangle ui-draggable ui-resizable ui-selectable"></div>
</div>

<button onClick="drawRect();">click here</button>

Answer 1

動態添加的元素不會被jQuery監視，你可以調用draggable並在新添加的元素上resizable試試這個。

function drawRect(){
    var rectangle = document.createElement('div');
    rectangle.className = 'rectangle ui-draggable ui-resizable ui-selectable';
    rectangle.style.width = "200px";
    rectangle.style.height = "200px";
    rectangle.style.position = "absolute";

    // Define resize handles
    var n = document.createElement('div');
    n.className = 'ui-resizable-handle ui-resizable-n';
    var e = document.createElement('div');
    e.className = 'ui-resizable-handle ui-resizable-e';
    var s = document.createElement('div');
    s.className = 'ui-resizable-handle ui-resizable-s';
    var w = document.createElement('div');
    w.className = 'ui-resizable-handle ui-resizable-w';

    // Build resize handles
    rectangle.appendChild(n);
    rectangle.appendChild(e);
    rectangle.appendChild(s);
    rectangle.appendChild(w);

    // Build div
    document.getElementById("canvas").appendChild(rectangle);


$('.rectangle').draggable();

    // Make elements resizable
    $('.rectangle').resizable({

    // Set custom resize handles
    handles: {'n': '.ui-resizable-n', 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'w': '.ui-resizable-w' },

    // Recalculate dimensions from pixels to percentages
    stop: function(e, ui) {
      var parent = ui.element.parent();
      ui.element.css({
          width: ui.element.width()/parent.width()*100+"%",
          height: ui.element.height()/parent.height()*100+"%"
      });
    }

}