2

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

Мне нужно чтобы отрабатывал похожий на этот код: $('.colorbox').colorbox();

Т.е. мои события я привязываю через $(document).on(), поэтому они отрабатывают. События сторонних плагинов реализованы по другому, а потому не выполняются после динамической загрузки контента.

На данный момент использую $(document).ajaxSuccess() для привязки событий сторонних плагинов после загрузки контента с помощью ajax.

Меня интересует есть ли более элегантное решение данной проблемы.

0

7 ответов 7

3

Есть несколько вариантов, как можно навесить событие на динамический элемент.

Первое, это навешивание обработчика по какому-то событию, т.е.:

$(document).on('mouseover', '.element', function(){
    if($(this).data('colorbox') != undefined) {
        $('.colorbox').colorbox();
    }
});

Еще можно поиграться с событиями DOM: DOM events.

3
  • Уже писал, что этот метод применяю, но для сторонних плагинов решение не найдено. 30 июл 2013 в 18:28
  • @alekseidolganov не видел, чтобы вы упомянули этот способ. По другому - это отлавливать изменения в DOM, и проверять измененные элементы. Но гемора добавится на порядок выше.
    – lampa
    31 июл 2013 в 10:45
  • Остановлюсь пока на способе $(document).ajaxSuccess() 1 авг 2013 в 5:35
2

Если на чистом JS - смотрите addEventListener()

2

jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы - при помощи ajax'а или функций типа append() - то события не затрагивают их.

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

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

Если кратко, то смысл делегирования в том, что обработчики "навешиваются" не на отсутствующие в dom элементы, а на существующий родительский объект.

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

100 % рабочий пример здесь

1

Попробуйте напрямую вызывать:

$(document).on('click', '.colorbox', function(e) {
  e.preventDefault();
  $.colorbox({href:$(this).attr('href'), open:true});
}
0
$(document).on('click', '.your_added_element', function(e){
    // благодаря "делегированию событий" - событие сработает всегда
})
1
  • Про это уже упоминал выше. Мне нужно чтобы срабатывал код типа $('.colorbox').colorbox(); 16 июл 2013 в 5:53
0

jquery live уже устарел.
Лучше использовать on

2
  • 1
    смотря какую версию jquery он использует)
    – mountpoint
    15 июл 2013 в 15:41
  • Использую on, но после загрузки нового контента события не выполняются, за исключением $(document).on 15 июл 2013 в 18:47
-1

jquery live('click', callback) или on('click', callback)

1
  • Метод live устарел давно. Выбросите его из головы.
    – lampa
    30 июл 2013 в 7:56

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.