Учим jQuery — Часть 7

Разбираемся с функцией 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 встречается гораздо чаще и, насколько мне известно, является более правильным (поправьте меня в комментариях если ошибаюсь).

7.2 Как по клику получить атрибуты элемента в jQuery

Применим наконец-то всё вышеупомянутое на практике:

$(function(){

	$('.js-btn').on('click', function(){
		let $this = $(this);
		let $panelId = $this.attr('data-panelid');
		$('#'+panelId).toggle();
	});

});

В новом стандарте все переменные записываются через 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();

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

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

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