События для динамически добавленных в DOM элементов?

Есть страница, в js которой вешаются события определенным элементам, примерно следующим образом:

$(document).ready(function() {<br>
    ...<br>
     $('.clickable-elements a').click(function() {<br>
        //Какое-то действие<br>
    });<br>
   ...<br>
});<br>




Далее, в какой-то момент происходит AJAX запрос к серверу, который возвращает HTML-код, который вставляется в DOM примерно так:

...<br>
     $('.clickable-elements element').html('HTML с сервера');<br>
    ...<br>




Соответственно, в нашем HTML-коде могут появиться теги к которым нужно привязать тоже самое событие, что и другим.

Есть ли способ делать это не через OnClick=«my_function()» в HTML который отдает сервер?
  • Вопрос задан
  • 86615 просмотров
Решения вопроса 1
@relic
используйте метод on
$(document).ready(function() {
    ...
    $('.clickable-elements element').on('click', 'a', function(e){
        //Какое-то действие
    });
   ...
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Jakim
@Jakim
Laravel - developer
$(function() {
        $(document).on('click touchstart', '.selector', function(){ 
            console.log($(this));
        });
    });

Ребятки, добавляем такой кусок кода в js и ловим все события как на телефоне так и на ПК, кроссбраузерно кроссплатформенно.
Не ищите других способов, ибо кто пишет про .delegate() или .live() давно не читали доку jQuery.
Ответ написан
Комментировать
@GR0ST
jQuery работает с элементами, которые были на странице на момент инициализации кода.

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

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

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

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

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

пример можно подсмотреть тут
moxiemaks.ru/2017/06/25/sobytija-dlja-dinamicheski...
Ответ написан
Комментировать
Ответ написан
Комментировать
@Dubrovin
Как по мне, так лучше использовать mutation observer и следить за компонентами динамически.
Ответ написан
Комментировать
@daniel333
Fullstack-разработчик
А если событие не click, а change на input type="file", то что тогда делать?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы