Javascript jQuery UI不处理动态创建的DOM元素？

我有jQueryUI可拖动和可调整大小的工作模式。我正在我的另一个div（#canvas）中使用button onClick函数创建一个div。Draggable对我静态添加的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绑定

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

点击这里

动态添加的元素不会被jQuery监视，您可以在新添加的元素上调用

draggable

和

resizeable

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+"%"
      });
    }

}

---

动态添加的元素不会被jQuery监视，您可以在新添加的元素上调用

draggable

和

resizeable

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+"%"
      });
    }

}

---

首先，您使用的是JqueryUi，而不是jquery？绑定可拖动事件的代码在哪里？@fatman我添加了jQuery绑定代码。我不知道如何编写JS mate，因此JS和jQuery的混合：）在html行

@UDB中缺少关闭
，谢谢，我编辑了这个问题。为简洁起见，问题中的代码与我实际拥有的代码大不相同。因此，缺少标记之类的东西可能不是问题。首先，您使用的是JqueryUi，而不是jquery？绑定可拖动事件的代码在哪里？@fatman我添加了jQuery绑定代码。我不知道如何编写JS mate，因此JS和jQuery的混合：）在html行
@UDB中缺少关闭
，谢谢，我编辑了这个问题。为简洁起见，问题中的代码与我实际拥有的代码大不相同。所以像丢失标签之类的东西可能不是问题。性感的东西，伙计。非常感谢：）性感的东西，伙计。非常感谢：）