Как пользоваться jQuery.click по элементам в примерах

Привет ребят, сегодня я бы хотел поговорить на тему jQuery ну и разобрать то как мы можем работать с функцией click. Как всегда, я приведу несколько примеров для того, чтобы максимально понимать, то как нам работать с этой функцией.

Буквально два года назад я уже начал встречать новости о том, что от jQuery разработчики отказываются по непонятным там причинам, мол все переходят на фреймворки такие как Angular и React ну и много подобных новостей, кроме того по сегодня слышу, что имеется более простое решение на замену jQuery – это Vue.js. Сегодня я бы хотел привести пример того, что jQuery будет популярным и дальше, причем мой прогноз — как минимум 5 лет, и сейчас я коротко расскажу почему.

Yandex история по запросу jquery

Это график запросов из yandex.wordstat.ru. Если обратить внимание, то да, тренд движется вниз, но пока существуют такие вещи как WordPress, Opencard, Joomla, Drupal которые работают с этой библиотекой, то разработчикам и деваться некуда! Почему я думаю, что как минимум пять лет?

Да у меня особого фундамента полагать так нет, но то количество CMS которое использует эту самую библиотеку просто не дает мне покоя, и я очень сомневаюсь, что все разработчики в один день скажут мол мы отказывается использовать эту технологию, разве что в браузерах что-то изменится и jQuery скрипты будут блокироваться, но это абсурд.

А пока его используют значит он актуален.

Пример 1. Почему в jQuery не работает click после append           

Буквально недавно встретил в интернете вот такой вот пример, парень скинул вот этот код, ну и после спросил: «Почему не работает?»

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

$(".item").click(function() {
alert("qeqqe");
});

Ну а после когда код заработает, можно уже сделать его более простым и компактным вот таким примерно:

Такой код даже просто читать! Если ты не знаешь как сделать что-то, нужно проговаривать этот код. Серьезно!

Я так постоянно делаю и сделаю с этим кодом:

В поле HTML добавляем div c классом wrapper, после чего переходим к javascript файлу. В JavaScript файле в div.wrapper добавляем свою строку с классом .item после чего по событию клик на .item внутри .wrapper выводим alert с текстом!

Круто? Я думаю очень, и так работает весь код, когда не понимаешь, что делать дальше, проговори то, что тебе нужно сделать. А то получается в прошлом примере получалась непонятная ситуация, которая даже звучит бредово если проговорить ее. (Мне даже захотелось попытаться):

В поле HTML добавляем div c классом wrapper, после чего переходим к javascript файлу. По событию клик на класс .item выводим alert с текстом после чего вставляем в переменную тег div с классом item и добавляем внутрь тега wrapper.

Как звучит? Мне как минимум не логично.

Совет: браузер читает код как мы бы читали книгу – с самого начала и двигаясь в конец. А значит чтобы у браузера не было вопросов он должен знать о тех с кем и как ему нужно работать.

Кстати еще один пример на тему кликов:

Сделано немного иначе, но при этом тоже рабочий пример.

Кстати, весь html который я прописываю в jsfiddle.net я с помощью Emmet, это очень крутой инструмент, советую его изучить если ты еще не в курсе что это такое!

Пример 2: Как имитировать клик по элементу на JQuery

Очень крутой пример который я нашел в интернете, он реально показывает наглядно как работает дом дерево ну и собственно функция клик. В общем у парня возникла цель по нажатию на совершенно другой элемент сделать имитацию клика по ссылке. По факту очень просто, но тоже требует понимания того как это работает!

Вот собственно и код парня, с вопросом почему оно не работает!

Не хочу повторяться с читкой кода, но на самом деле подход вообще не правильный. И это по факту наглядный пример – стоящий. В целом тут просто достаточно разобраться как работает свойство click и свойство trigger.

Если разбираться с событием click то все должно быть понятно, с ним мы можем делать проверку на клик, а можем делать сам клик – нажав в одним месте, делаем клик в другом месте.

А вот если разбираться с trigger(‘click’), то сразу скажу, что это не одно и тоже самое. При нажатии мы грубо говоря ищем в коде уже написанную функцию типа:

$(selector).click(()=> {
//some code…
});

//либо
$(selector).on(‘click’, ()=> {
//some code…
})

То есть, чтобы не писать код повторно либо не создавать для этого целые функции, которые потом нужно отдельно вызывать, мы просто используем trigger, потому. А если почитать то, что пишут в официально документации:

Вызывает событие у выбранных элементов, что приводит к запуску обработчиков этого события.

После я уже решил написать решение вместе с trigger.

Но на самом деле я считаю, что там много лишнего кода, и это все дело можно сократить в два раза. Вот таким образом:

$( "#foo" ).click(function() {
    $( "#content a" )[0].click();
});

Получается тоже самое что и в предыдущем варианте с точки зрения того, какая задача стоит перед нами. А вот теперь вопрос, зачем 0-й элемент в массиве, то есть почему:

$( "#content a" )[0].click();
// а не так:
$( "#content a" ).click();

Все значительно проще чем кажется! В начале я говорит, что этот пример отлично показывает, как работает DOM дерево. В целом чтобы понимать, DOM дерево — это массив элементов внутри html страницы.

То если у нас есть простая страничка, в которой есть несколько тегов, то ее можно считывать, как массив. То есть чтобы получить конкретный элемент, чтобы браузер понимал на кого ему нужно кликнуть при вызове события .click() мы должны указать максимально точно с помощью селектора на кого мы хотим кликать. Давайте введем в консоли следующий код и увидим, что из этого получится: $(‘#content a’)

пример dom дерева в devTools

Вот потому мы и указываем там номер элемента.

Как избежать указаний номера элемента при нажатии на jQuery.click?

Я думаю никак, но если знаешь способ, то большая просьба поделись со мной! Но при этом нет разницы, когда мы указываем на какой элемент нам кликать:

Пример 3. Что такое jQuery.live и какая разница между click или on(’click’, ()=>{})

Сразу скажу, что jQuery.live это устаревшая функция которая в новых версиях jQuery не работает, потому можно просто забыть об этой функции. Вот и разница!

$( ".offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
// аналог чем заменить
$( document ).on( "click", ".offsite", function() {
alert( "Goodbye!" );  // jQuery 1.7+
});

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

Инсайт от автора

Я люблю изучать языки в жизни – я не имею ввиду языки программирования. Я говорю о языках типа русского, английского, так же я знаю украинский так как родился на Украине, ну и венгерский с немецким, это те языки, которые мне получилось выучить. Чтобы не лукавить, это те языки, на которых я могу уверенно говорить и объясниться, но, если говорить честно, хуже всего я говорю на немецком.

К чему это я?

Языки программирования имею практически такую же логику, как и обычный человеческий язык, меняется только синтаксис. Потому если ты умеешь программировать на одном каком-то языке очень хорошо, нужно просто открыть синтаксис и просто использовать его в таком ключе как сказано в документации. 100%-го успеха я не гарантирую, потому что даже в жизни в каждом языке есть свои правила, почему это работает так, а не иначе.

Потому, просто нужно трудиться, потратить большую долю времени на практику, чтобы позже делать все без особого напряга! Кипение мозга при этом неизбежно – это самое важное что нужно понимать!

Если тебе понравилась эта статья, я был бы очень признательным тому, что ты поделишься нею в своих социальных сетях, так ты кстати сделаешь для себя закладку, которая буде практически всегда под руками ну и вдруг твоим друзьям эта ссылка тоже поможет в изучении становления верстальщиком!

Оставьте комментарий