Разбираемся с функцией click(), одной из самых важных тем в JavaScript`е.
В предыдущей части мы добавляли контент и HTML, внутрь нашего селектора, тега и т.д. Сегодня мы детально разберем тему в jQuery – Как повесить клик на кнопку и какие есть особенности в данном вопросе.
7.1 click function в jQuery способы и различия
Повесить клик, мы можем как минимум 3 способами.
Способ 1ый (не рекомендую):
$('.js-btn').click(function(){});
Способ 2ой:
$('.js-btn').on('click', function(e){});
Способ 3 (идеально подойдет для AJAX):
$(document).on('click', '.js-btn', function(){});
В чем же различие между этими способами? 1 способ просто морально устарел. Его еще часто можно встретить в коде и он не настолько устаревший как тот же bind(‘click’).
Разница заметно ощущается между 2ым и 3им. Последний способ, позволяет событиям выполнятся даже на тех элементах, которых не было изначально в DOM дереве. Например, на сайте есть кнопка “Показать еще”. По клику на нее у нас появляются новые товары. Для всех новых товаров, такие кнопки как “+” и “-” в количестве, кнопка добавить в корзину, добавить в избранное – работать не будут, если вы напишите обработчики через 2ой способ записи.
Указав $(document) – мы как бы указываем родительский контейнер. Вы конечно можете указывать $(‘body’) или $(‘.catalog-section’) в качестве родителя, код в любом случае сработает, но вариант с document встречается гораздо чаще и, насколько мне известно, является более правильным (поправьте меня в комментариях если ошибаюсь).
Что если у нас события по клику одинаковые? Чтобы не дублировать код (вспоминаем правило DRY – Don’t repeat yourself), можем сделать такую запись:
$(document).on('click', '.js-btn, .js-btn-order', function(){});
‘.js-btn, .js-btn-order’ – вот что поменялось, мы перечисляем через запятую в тех же кавычках селекторы (в моем случае в одинарных). В некоторых случаях функцию по клику приходится выносить как отдельную и запускать, например function orderClick(){}.
7.2 Как по клику получить атрибуты элемента в jQuery
Применим наконец-то всё вышеупомянутое на практике:
$(function(){
$('.js-btn').on('click', function(){
let $this = $(this);
let $panelId = $this.attr('data-panelid');
$('#'+panelId).toggle();
return false;
});
});
В новом стандарте все переменные записываются через let вместо var. Текущий объект $(this) лучше сохранить в переменную, особенно если будем к нему в дальнейшем обращаться. На следующей строчке мы получаем data атрибут – data-panelid, но и есть и более красивая запись:
let $panelId = $this.data('panelid');
toggle() – мы уже изучали в пред. уроках.
7.3 Как по клику изменить HTML в jQuery
Как бы выглядел пример используй мы var 🙂
var content = "My new Content";
$('.panel-button').on('click', function(){
var panelId = $(this).data('panelid');
$('#'+panelId).toggle();
$('#'+panelId+' .panel-body').html(content);
});
Тут переменную контент мы вынесли за функцию обработчик, хотя это и не обязательно, но знать про такую запись вы должны. Ну и очень часто нам придется дописывать return false; – чтобы по клику на теги ссылок больше ничего не выполнялось кроме скрипта, т.к. очень часто в вёрстке остается <a href=”#”>…</a>.
Бывают ситуации когда обработчиков несколько, а иногда они записываются через атрибут onclick=”alert(‘hello’);return false;” – да, и такое тоже бывает. И иногда возникают конфликты между скриптами, и, местами, приходится делать return true;
Есть и другой способ, выбирайте какой-то вам ближе и какой для вас более канон 🙂 – e.preventDefault();
