jQuery عنصر جديد ملحق Dom لا يعمل

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');

أعلم أنه يمكنني استخدام العيش لجعله يعمل لكنني لا أعرف من أين أضيفه في البرنامج النصي. أنا أعرف فقط كيفية إضافته في حدث مثل النقر، Mouseover.

واسمحوا لي أن أعرف إذا كان لديك بعض النصائح حول هذا واحد.

شكرا لك

Answer 1

ما أقوم به هو إعداد "SelectableS 1" مع معالج الأحداث لحدث مكياج يسمى "Dragsetup". من شأنها أن تبدو مثل هذا:

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

ثم كلما قمت بإضافة جديد، يمكنك فقط الاتصال:

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

Answer 2

يجب عليك استخدام live لإرفاق الأحداث على عناصر DOM التي تتم إضافتها بمجرد تحميل DOM. jquery doc for live