jQuery click срабатывает несколько раз

Главные вкладки

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 13:50

Добрый день, подскажите в чем причина срабатывания функции клика несколько раз?
Вот код:
<button id="target" class="btn btn-primary">ADD</button>

jQuery( "#target" ).click(function() {
        alert('alert');
});

При клике алерт вылазит 5 раз.

Лучший ответ

Аватар пользователя Andruxa Andruxa 1 февраля 2020 в 14:08

Вот так правильно:
jQuery( "#target", context ).click(function(){
потому, что бихеверы вызываются, например при подгрузке ajax - чтобы навесить события на вновь добавленный контент.
Но применяются они к тому, что находится в context.

Комментарии

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 13:57
(function ($, Drupal, settings) {

  "use strict";

  Drupal.behaviors.helloworld = {
    attach: function (context) {
jQuery( "#target" ).click(function() {
        alert('alert');
});
}
  }

})(jQuery, Drupal, drupalSettings);

вот целиком

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 14:01

вообщем вот так срабатывает один раз:

jQuery( "#target" ).one('click', function(evt) {
        alert('alert');
        evt.stopImmediatePropagation();
});

Не силен в js, объясните почему без "ЭТОГО" скрипт вызывается несколько раз?
Скрипт подключается через библиотеку в своем модуле, через hook_preprocess_page()

Аватар пользователя Andruxa Andruxa 1 февраля 2020 в 14:08

Вот так правильно:
jQuery( "#target", context ).click(function(){
потому, что бихеверы вызываются, например при подгрузке ajax - чтобы навесить события на вновь добавленный контент.
Но применяются они к тому, что находится в context.

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 19:27

Подскажите, а как быть если при загрузке скрипта выполняется такой код:
var kanban = new jKanban({..some code..});
У меня эта переменная создается 5 раз.

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 19:51

У меня больше вопрос состоит в том, почему скрипт отрабатывается 5 раз, почему так происходит? Или может я не до понимаю какого то фундаментального факта в JS. Изучаю программирование методом проб и ошибок.

Аватар пользователя buddy90210 buddy90210 1 февраля 2020 в 19:47

Вообщем, с событиями понятно, срабатывает. А как быть в этом случае:

(function ($, Drupal, settings) {
  "use strict";
  Drupal.behaviors.kanban = {
    attach: function (context) {
                alert('alert');
    });
   }
  }
})(jQuery, Drupal, drupalSettings);

В этом случае алерт так же срабатывает 5 раз.

Аватар пользователя Andruxa Andruxa 1 февраля 2020 в 21:38

Причина в том, что после загрузки страницы у вас 5 раз вызывается Drupal.attachBehaviors(); вместо одного.
Смотрите в инструментах на вкладке Сеть - есть ли аякс-запросы, и почему их несколько. Вообще, если они есть, то это не вполне нормально - на свежезагруженную страницу тянуть что-то аяксом без активности пользователя.