На новые элементы страницы не действует обработка событий 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);
Т.е. отключить обработку клика и снова включить, дабы избежать многократной обработки.
2 ответа к “На новые элементы страницы не действует обработка событий jQuery”
А почему бы не попробовать привязывать функцию не к классу а объекту? В данном случае создаваемой ссылке. Впрочем, вариантов решения тут действительно много.
Да, выбор варианта — дело каждого конкретного вебмастера и частного случая. А события в любом случае привязываются к объекту(-ам), даже если при поиске нужных объектов используется селектор по классу. Конечно, лучше использовать селектор по идентификатору, если у нужного объекта есть ID.