Как обновлять ссылку на элемент после использования drag&drop?

Question

[Gagatyn]

Здравствуйте!
Пример
После использования drag&drop элементы, которые поменялись местами перестают "существовать", т.е. события которые на них были повешены не срабатывают, в моём случае текст нельзя изменить. Только после того, иногда, если поменять снова местами, срабатывают. Я обновлял ссылку (переменную) в событии DragEnd, но не работает.
Подскажите что делать или поделитесь источником, где есть ответ, пожалуйста.

Answer 1

[ThunderCat]

вешать слушатель не на элементы, а на документ, по клику проверять или подходит элемент по классу/ид.

чистым жс не владею в совершенстве, в jquery примерно так:

$(document).on('click', '.someclass', function(e){
  e.preventDefault(); // если надо
  doSomeStuff();
})

Answer 2

[0xD34F]

Делегируйте обработку событий, и тогда не придётся беспокоиться о пропавших обработчиках. Как-то так.

Comments

[Gagatyn]

0xD34F
Подскажите пожалуйста еще раз. При создании нового перетаскиваемого элемента, обработчик снова вешать на документ? Вот код
Нужно чтобы созданные элементы тоже могли спокойно взаимодействовать со старыми.

[0xD34F]

Gagatyn, "снова вешать на документ"? Выберите что-нибудь одно: либо "снова" - каждому элементу назначаются собственные обработчики, либо "на документ" - делегируете обработку событий общему предку, и тогда обработчики событий назначаются один раз для всех существующих и будущих элементов.

[Gagatyn]

0xD34F, Упс.
Я про делегирование. При делегировании новые элементы не реагируют на старые. Мне придется переписывать код? Код

[0xD34F]

Gagatyn,

При делегировании новые элементы не реагируют на старые.

У вас там получение коллекции элементов и назначение обработчиков каждому из них, в forEach'е. Это не делегирование.

[Gagatyn]

0xD34F, забыл, я уже стер это все. Не работало. Поправил код. Я не совсем понял, почему он сразу не перетаскивается. Сломалось всё. Я повесил на document событие "mousedown". Может нужно отдельно вешать все событии drag&drop на document? Что делать?

[0xD34F]

Gagatyn,

Поправил код.

Ерунду какую-то сделали. Снова вешаете обработчики на каждый элемент.

Может нужно отдельно вешать все событии drag&drop на document?

А может, вместо того, чтобы гадать, стоило загуглить, например - "javascript делегирование", и по первой же ссылке ознакомиться, что и как надо делать? И не сегодня, а неделю назад. А?

[Gagatyn]

0xD34F, прошу прощение.