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