На новые элементы страницы не действует обработка событий jQuery

Сегодня ночью практическим путём познал, что для динамически созданных элементов не выполняется ранее заданная в сценарии обработка событий jQuery, что обработку событий (click, hover, mouseenter, focus, keydown и др.) к новым элементам надо привязывать. Расскажу подробнее на примере.

В коде JS у меня существует вот такая привязка обработки клика по всем ссылкам класса «vi»:

$j('.vi').on("click", some_function);

Но в процессе работы со страницей появляются новые ссылки класса «vi». Казалось бы, при клике по ним тоже должна вызываться функция some_function, но как бы не так: при клике ничего не происходит. Тут я и смекнул, что ранее описанная обработка клика по ссылкам класса «vi» не действует на новые ссылки класса «vi», созданные уже после вышеописанной привязки обработчика события.

Короче, обработку события надо привязывать ко вновь созданной ссылке. Обратите внимание, на чём я сделал акцент. Если просто после создания каждой ссылки снова прописывать

$j('.vi').on("click", some_function);

— это будет не корректно. Ведь так мы ко старым ссылкам привяжем обработку повторно столько раз, сколько раз будут создаваться новые ссылки. И функция some_function будет выполняться при клике по старым ссылкам столько раз, сколько раз был привязан обработчик. У себя я решил задачу так:

$j('.vi[href=#'+i+']').on("click", some_function);

Где i — уникальный адрес созданной ссылки, известный мне. Если же вам известен только класс ссылки, а остальное узнавать лень, то можно сделать и вот так:

$j('.vi').off("click", some_function).on("click", some_function);

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

Запись опубликована в рубрике Web-мастеринг с метками . Короткая ссылка для добавления в закладки: На новые элементы страницы не действует обработка событий jQuery.

2 Responses

  1. Константин говорит:

    А почему бы не попробовать привязывать функцию не к классу а объекту? В данном случае создаваемой ссылке. Впрочем, вариантов решения тут действительно много.

    • Pavluha.Net говорит:

      Да, выбор варианта — дело каждого конкретного вебмастера и частного случая. А события в любом случае привязываются к объекту(-ам), даже если при поиске нужных объектов используется селектор по классу. Конечно, лучше использовать селектор по идентификатору, если у нужного объекта есть ID.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.