jQuery PNotify нажал кнопку несколько раз

Question

У меня есть несколько изображений. При нажатии на любой из них открывается всплывающее окно PNotify.

У всплывающего окна PNotify есть простая форма с текстовым полем и кнопкой Сохранить. При нажатии на кнопку, он просто добавляет абзац текста к нажатому изображению.

Но когда я нажимаю кнопку "Сохранить", он добавляет текст несколько раз и добавляет +1 к каждому следующему щелчку, например сначала 1, затем 2, затем 4, затем 6 и т. Д.

$('#pic_wrapper').on('click', '.mark', function(e) {
    var notice = new PNotify({
      ...
    });

    $('#text_form button[name=save]').on('click', function() {
      $('#' + e.target.id).append('<p class="text">' + $.trim(
        $('#input_text').val()) + '</p>');
      notice.remove();
    });
  });

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

Answer 1

Обработчик события является приложением мультипликационного времени, поэтому вы сталкиваетесь с проблемой. .off() метод удаляет обработчики событий, которые были .on(),

$('#text_form button[name=save]').off().on('click', function() {
  $('#' + e.target.id).append('<p class="text">' + $.trim($(
    '#input_text').val()) + '</p>');
  notice.remove();
});