jQuery nouvel élément ajouté à DOM ne fonctionne pas

Question

J'ai un script qui sélectionne et entraîne plusieurs éléments. Il fonctionne très bien, mais quand je veux ajouter un autre élément nouveau à cette fonction, ajoutez à DOM, il ne fonctionne pas. La fonction est:

$(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");
            }
        });
    });

Le nouvel élément est ajouté comme ceci:

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

Je sais que je peux utiliser en direct pour le faire fonctionner, mais je ne sais pas où l'ajouter dans le script. Je ne sais comment l'ajouter sur un événement comme un clic, mouseover.

S'il vous plaît laissez-moi savoir si vous avez quelques conseils sur celui-ci.

Merci

Answer 1

Ce que je ferais est de mettre en place « # selectables1 » avec un gestionnaire d'événements pour un événement maquillé appelé « dragSetup ». Cela ressemblerait à quelque chose comme ceci:

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

Ensuite, chaque fois que vous ajoutez un nouveau, vous pouvez simplement appeler:

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

Answer 2

Vous devez utiliser live pour attacher les événements aux éléments DOM qui sont ajoutés une fois que le DOM est chargé. jQuery Doc en direct