附加到 DOM 的 jQuery 新元素不起作用

Question

我有一个可以选择并拖动多个元素的脚本。它工作正常，但是当我想向该函数添加另一个新元素，将其附加到 DOM 时，它不起作用。功能是：

$(function() {
        var selected = $([]), offset = {top:0, left:0};
        $("#selectable1").selectable();

        $("#selectable1 span").draggable({
            start: function(ev, ui) {
                $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");

                $("span").removeClass("cica"); // ads class Cica to the draged/selected element
                $(this).addClass("cica");

                selected = $(".ui-selected").each(function() {
                    var el = $(this);
                    el.data("offset", el.offset());
                    $(this).text("Selected and dragging object(s)");
                });

                offset = $(this).offset();
            },
            drag: function(ev, ui) {
                var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                selected.not(this).each(function() {

                    var el = $(this), off = el.data("offset");
                    el.css({top: off.top + dt, left: off.left + dl});

                });

            },
            stop: function(ev, ui){
                $(this).text("Drag has stopped");
            }
        });
    });

新元素的添加方式如下：

$('<span class="drag">Xia</span>').appendTo('#selectable1');

我知道我可以使用 live 使其工作，但我不知道在脚本中的何处添加它。我只知道如何将其添加到单击、鼠标悬停等事件上。

如果您对此有任何建议，请告诉我。

谢谢

Answer 1

我要做的就是为名为“dragSetup”的虚构事件设置一个事件处理程序“#selectables1”。看起来像这样：

$('#selectables1').bind('dragSetup', function() {
  $(this).find('span:not(.dragReady)')
    .draggable({ ... })
    .addClass('dragReady');
});

然后每当您添加新的时，您都可以调用：

$('#selectables1').trigger('dragSetup');

Answer 2

您必须使用 live 将事件附加到加载 DOM 后添加的 DOM 元素。 实时 jQuery 文档