我尝试添加一个项目,就像这个示例: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);
只看到一个确认问题。
谢谢。
答案 0 :(得分:1)
使用.off()
。 .off()
方法将删除.on()
附带的事件处理程序。
所以在您的情况下:
$("#nestable .button-delete").off().on("click", deleteFromMenu);
答案 1 :(得分:1)
您可以使用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')));
};
阅读以下文章以更好地理解