Как один раз привязать событие в одностраничном приложении?

Question

[GM2mars]

Есть одностраничное приложение на котором происходит разные манипуляции с элементами, к примеру удаление.

Использую стандартную привязку функции к элементу на какое-то событие.
Но элементы на странице могут меняться и тут возникает проблема:
1. Если делать привязку вида:

var el1=jQuery('.el1');
el1.on('click', function() {
  console.log('element1');
})

То такое событие соответственно работает пока мы не сменили элементы. То есть убрали старый el1 и добавили новый el1.

2. Если делать привязку:

jQuery(document).on('click', '.el1', function() {
  console.log('element1');
})

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

Можно вначале привязки делать отвязку от события:

jQuery(document).off('click', '.el1');
jQuery(document).on('click', '.el1', function() {
  console.log('element1');
})

Есть ли какой-нибудь другой способ решить данную проблему?

Answer 1

[GM2mars]

Спасибо за ответы, видимо нет простого способа стандартными средствами библиотеки, решить данную проблему.
Не люблю фреймворки, использую только в крайней необходимости, а только ради одной функции и подавно не вижу в них смысла.
Тогда придется использовать (отвязка - привязка).

Comments

[Сергей Протько]

Ну возможно при использовании фреймворков вы не только одной функцией будете пользоваться. Скажем фреймворки аля angular.js помогут вам стартовать, научат модульному дизайну, помогут писать менее связанный код. После можно попробовать что-то посложнее, например backbone, в котором структуру проекта делаете уже вы, что дает профит в производительности. Ну и не стоит забывать что код стоит покрывать тестами для последующих изменений и рефакторинга в будущем.

[GM2mars]

На ангуляре я на работе пишу большой проект и знаком с его функциональностью и возможностями, для своего проекта я не хочу его использовать.

Answer 2

[Сергей Протько]

Вариант для ленивых: использовать готовый фреймворк (AngularJS, Backbone и т.д. которые либо полностью решают такие проблемы (директивы в агнуларе) либо предоставляют возможность отслеживать изменения (например у вас рендрится вьюшка - вы биндите события, она уничтожается - отвязываетесь ну или забиваете. Если у вас там списки - можно контролировать это все до элементов списка и т.д. В Angularjs через создание/уничтожение скоупа, который привязан к элмент).

Answer 3

[Всеволод Родионов]

cornerJS, polymer/x-tags