Генерируем HTML-структуру...
Качественная, кроссбраузерная верстка
Адаптивность, валидность, высокая скорость загрузки сайта
Интеграция верстки с CMS
1С-Битрикс, Joomla, Wordpress и многими другими.
Серверное и клиентское программирование
PHP, Javascript(Jquery, Angular.js). От js-анимаций до REST-систем.
Сайт под ключ
От сайтов-визиток и лендингов до корпоративных порталов и интернет-магазинов на 1С-Битрикс
Оптимизация и доработка существующих сайтов
Увеличение скорости загрузки, стабильности работы, исправление ошибок. Удаление вирусов и повышение безопасности сайта.

Бесценное о назначении обработчиков событий в jQuery

Повесить обработчик события на элемент, чтобы при клике/наведении/etc выполнилась какая-то функция – это наверное то, для чего чаще всего используется javascript/jQuery в несложных по функционалу на клиенте сайтах. Думаю, каждый web-разработчик не одну сотню раз делал это, и почти каждый когда-нибудь задавался вопросом «почему не сработало?»

Обычно обработчик события назначается таким образом:

$('#element').click(function( event ) {
/*какой-то код*/
});

Этак конструкция безотказна и работает практически во всех случаях. К ней очень быстро привыкаешь, и когда в очередной раз ее используешь, обновляешь страницу, кликаешь по элементу, а код не срабатывает – возникает легкое недоумение. Вроде бы, ломаться-то нечему.

На самом деле проблема может возникнуть (и это наиболее частая причина) при попытке назначить обработчик динамическому элементу. К примеру, вы пытаетесь обработать клик по всплывающему изображению lightbox, fancybox и им подобным. Вы прописываете обработчик события click элементу img – развернувшейся картинке, но ведь его изначально не было в коде. Плагин создал его динамически, когда вы кликнули по превью изображения. А значит, назначения обработчика не было – назначать-то нечему.

Выходом из ситуации может быть конструкция такого вида:

$('#element').on('click', function(){
/*какой-то код*/
});

Но и этот способ может не сработать. И тогда в ход идет тяжелая артиллерия:

$(document.body).on('click', '#element' ,function(){
/*какой-то код*/
});

Этот способ работает на 100% со всеми динамическими элементами.

Знаете другой способ обработать событие на динамическом элементе, или столкнулись с ситуацией, когда не сработал ни один пример? Напишите в комментариях!:)

Javascript, 19 Мая 2016

Комментарии

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

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

CAPTCHA
← Вернуться к блогу
Ознакомьтесь с моим резюме

Обратная связь

Вы также можете связаться со мной, отправив письмо на почту . В любом случае, я постараюсь ответить вам как можно оперативнее!