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();
});