jQuery новый элемент, добавленный в DOM, не работает - PullRequest
Новая
       33

jQuery новый элемент, добавленный в DOM, не работает

3 голосов
/ 04 февраля 2010

У меня есть скрипт, который выбирает и перетаскивает несколько элементов. Он работает нормально, но когда я хочу добавить еще один новый элемент в эту функцию, добавить его в 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, чтобы это работало, но я не знаю, где добавить это в скрипт Я только знаю, как добавить его в событие, такое как щелчок, наведение мыши.

Пожалуйста, дайте мне знать, если у вас есть несколько советов по этому вопросу.

Спасибо

Ответы [ 2 ]

3 голосов
/ 04 февраля 2010

Что бы я сделал, это настроил "# selectables1" с обработчиком событий для готового события с именем "dragSetup".Это будет выглядеть примерно так: 

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

Тогда, когда вы добавляете новое, вы можете просто позвонить: 

$('#selectables1').trigger('dragSetup');
2 голосов
/ 04 февраля 2010

Вы должны использовать live, чтобы прикрепить события к элементам DOM, которые добавляются после загрузки DOM. JQuery Doc для живого

...