один и тот же скрипт загружается несколько раз при событии клика javascript / jquery

Question

$(document).click(function() {
  $('.settings').click(function(){
    alert();
  });

});

Я загружаю этот сценарий для события click, так как не могу загрузить его для события ready. Теперь, когда я нажимаю кнопку с классом settings в первый раз, ничего не происходит, как ожидалось, так как скрипт загружается после нажатия кнопки.

Второй раз, когда я нажимаю на эту кнопку, предупреждение показывается один раз (как и ожидалось).

Но неожиданное поведение заключается в том, что, когда я нажимаю в третий раз, предупреждение показывается 2 раза. Когда я нажимаю 4 раза, предупреждение показывается 3 раза и т. Д.

Одна из возможных причин, по которой я могу придумать, заключается в том, что скрипт загружался каждый раз, когда я нажимал.

В чем может быть проблема? Как я могу предотвратить загрузку одного и того же скрипта снова и снова?

Спасибо!

Answer 1

Как уже сказал @Bravo, вам нужен обработчик отключения. Вы добавляете обработчик события щелчка при каждом нажатии. Поэтому вы должны удалить предыдущий обработчик кликов перед добавлением другого. Что-то вроде:

$(document).off('click').on('click', (function() {
  $('.settings').off('click').on('click', function(){
    alert();
  });
});

Answer 2

Эта проблема будет решена, если событие Click, относящееся к документу, запускается только один раз, когда вы впервые нажимаете кнопку настройки.

Если вы хотите, чтобы обработчик событий срабатывал только один раз, взгляните на .one (): http://api.jquery.com/one

 $(document).one("click",function() {
      $('.settings').click(function(){
        alert();
      });
    });

Answer 3

Каждый раз, когда вы нажимаете, вы добавляете новый обработчик для .settings. Попробуйте это:

$(document).on('click', '.settings', function() {
  alert();
});