动态提供onclick，避免重复事件调用

Question

我尝试添加一个项目，就像这个示例：https://codepen.io/Gobi_Ilai/pen/LLQdqJ

var addToMenu = function () {
  var newName = $("#addInputName").val();
  var newSlug = $("#addInputSlug").val();
  var newId = 'new-' + newIdCount;

  nestableList.append(
    '<li class="dd-item" ' +
    'data-id="' + newId + '" ' +
    'data-name="' + newName + '" ' +
    'data-slug="' + newSlug + '" ' +
    'data-new="1" ' +
    'data-deleted="0">' +
    '<div class="dd-handle">' + newName + '</div> ' +
    '<span class="button-delete btn btn-danger btn-xs pull-right" ' +
    'data-owner-id="' + newId + '"> ' +
    '<i class="fa fa-times" aria-hidden="true"></i> ' +
    '</span>' +
    '<span class="button-edit btn btn-success btn-xs pull-right" ' +
    'data-owner-id="' + newId + '">' +
    '<i class="fa fa-pencil" aria-hidden="true"></i>' +
    '</span>' +
    '</li>'
  );

  newIdCount++;

  // update JSON
  updateOutput($('#nestable').data('output', $('#json-output')));

  // set events
  $("#nestable .button-delete").on("click", deleteFromMenu);
  $("#nestable .button-edit").on("click", prepareEdit);
};


 var deleteFromMenu = function () {
            var targetId = $(this).data('owner-id');
            var target = $('[data-id="' + targetId + '"]');
            var textConfirm = "Are you sure to delete" + target.data('name') + " ?";

                var result = confirm(textConfirm);
                if (!result) {
                    return;
                }

            // Remove children (if any)
            target.find("li").each(function () {
                deleteFromMenuHelper($(this));
            });

            // Remove parent
            deleteFromMenuHelper(target);

            // update JSON
            updateOutput($('#nestable').data('output', $('#json-output')));

        };

然后尝试删除其中一条记录。该页面要求确认问题（1+添加记录）次。 例如，如果尝试添加 2 条记录，并尝试删除一项（不是最后添加的项），则会出现 3 确认消息。

我如何管理$("#nestable .button-delete").on("click", deleteFromMenu); 只看到一个确认问题。 谢谢。

Answer 1

使用.off()。 .off() 方法删除了与 .on() 关联的事件处理程序。

所以在你的情况下：

 $("#nestable .button-delete").off().on("click", deleteFromMenu);

Answer 2

您可以使用removeEventListener 或off() 删除之前的事件监听器。

$("#nestable .button-delete").off().on("click", deleteFromMenu);
$("#nestable .button-edit").off().on("click", deleteFromMenu);

已更新（提供更好的解决方案）

如果#nestable 是静态的，则应将侦听器事件移到addToMenu 方法之外。

格式：$(staticAncestors).on(eventName, dynamicChild, function() {});

所以在你的情况下

// set events
  $("#nestable").on("click", '.button-delete', deleteFromMenu);
  $("#nestable").on("click", '.button-edit', prepareEdit);

var addToMenu = function () {
  ....
  // update JSON
  updateOutput($('#nestable').data('output', $('#json-output')));
};

阅读以下文章以更好地理解。

Event binding on dynamically created elements?