Как реализовать слушатель событий для динамически добавляемых строк таблицы сбрасываемых?

0

У меня есть редактируемая таблица, в которой вы можете динамически добавлять строки с помощью кнопки, но я не могу удалить свои перетаскиваемые вещи в новые строки, даже если у них есть droppable-Selektor. Я попытался исправить его делегатом и droppable() для новых строк, но не смог. Любые советы или идеи?

Here is my Code: http://jsfiddle.net/gM3bF/7/

Теги:
droppable

2 ответа

1
Лучший ответ

Вы должны добавить .droppable(options) в свою новую строку.

Чтобы заставить его работать, я добавил класс для новой строки:

var newtr = $('<tr />', { class: 'sortable-row ui-droppable newRow' });

А теперь добавьте droppable в этот newRow (и, наконец, удалите этот новый бесполезный класс):

$(".newRow") .droppable( {
        revert: true,
        drop: function (event, ui) {

            var id = ui.draggable.prop('id');
            if (id == "blurk") { var content = blurkContent(); };
            var title = $(event.target).closest('tr').children()[2];
            $(title).html(unescape(content[0]));
            var description = $(event.target).closest('tr').children()[3];
            $(description).html(unescape(content[1]));
            var link = $(event.target).closest('tr').children()[4];
            $(link).html(content[2]);
            var thumbnail = $(event.target).closest('tr').children()[5];
            $(thumbnail).html(content[3]);

        }
} )
$(".newRow").removeClass("newRow");

Конечно, вы можете упростить параметр, который вы добавляете, создавая новый var для этого.

FIDDLE

Надеюсь, поможет

Поделиться
  • 0
    Большое спасибо! Это сработало! Просто добавьте «.new row» и скопируйте эту функцию снизу. Теперь длина моего скрипта удвоилась, но это нормально, пока это работает;)
  • 0
    Рад, что помог. Вы можете определить новую функцию, содержащую эту функцию, в параметре «drop», теперь эту новую функцию можно вызывать при инициализации droppable и при добавлении новой строки droppable. тебе решать. Смотрите отредактированную FIDDLE: jsfiddle.net/zhULn/1
Показать ещё 1 комментарий
0

использовать:

$(document).on(eventName, selector, function);

Применение:

$(document).on('click', 'input.addButton', function(){ alert('clicked'); });

$(document).on('dblclick', '#editableTable td', function(){ alert('td clicked'); });

$(document).on('click', '#editableTable input.deleteButton', function(){ alert('delete clicked'); });

их можно объявить один раз в обработчике событий документа.

Однако,

если у вас есть динамически добавленные перетаскиваемые элементы, обязательно вызовите .draggable({}) после их добавления в DOM.

надеюсь, это поможет.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню