我有一个可以选择并拖动多个元素的脚本。它工作正常,但是当我想向该函数添加另一个新元素,将其附加到 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 来使其工作,但我不知道在脚本中的何处添加它。我只知道如何将其添加到单击、鼠标悬停等事件上。
如果您对此有任何建议,请告诉我。
谢谢
最佳答案
我要做的是使用名为“dragSetup”的虚构事件的事件处理程序设置“#selectables1”。看起来像这样:
$('#selectables1').bind('dragSetup', function() {
$(this).find('span:not(.dragReady)')
.draggable({ ... })
.addClass('dragReady');
});
然后,每当您添加新内容时,您都可以调用:
$('#selectables1').trigger('dragSetup');
关于附加到 DOM 的 jQuery 新元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2202537/