Javascript 单击时按钮会触发两次

如果你走到下面的JSFiddle。添加两个项目，然后在控制台中的其中一个项目上按“完成”，它将两次注销同一个按钮。我不明白为什么

我做错了什么！：）

HTML

添加

完整的

JS

$（文档）.ready（函数（）{
（功能（）{
var itemTracker={
//初始化
init:function（）{
这是bindEvents（）；
},
//缓存区
缓存区：{
inputAdd:$（“#inputAdd”），
submitAdd:$（“#submitItem”），
listContent:$（“#listContent”），
已完成：$（“#已完成”）
},
//添加项
附加项：函数（）{
var itemValue=this.cacheDom.inputAdd.val（）；
var listItem=$（“
”）；
var buttonRemove='Remove'；
var buttonComplete='Complete'；
追加（itemValue）；
listItem.append（按钮删除）；
listItem.append（按钮完成）；
var itemContent=this.cacheDom.listContent.append（listItem）；
this.cacheDom.inputAdd.val（“”）；
//删除项目
var remove=$（'.remove'）；
删除。打开（“单击”，功能（e）{
$（e.target）.最近的（“li”）.hide（）；
});
var complete=$（“.complete”）；
//完整项目
var completedItem=函数（e）{
console.log（this）；
//var childParent=$（this.parent（）；
//var rootParent=childParent.parent（）；
//var parentId=rootParent.prop（'id'）；
//
//if（parentId==“listContent”）{
//$（“#已完成”）。追加（列表项）；
//}其他{
//$（'#listContent'）。追加（listItem）；
// }
};
完成。打开（“单击”，完成项目）；
},
//绑定事件
bindEvents:function（）{
this.cacheDom.submitad.on（“单击”，this.addItem.bind（this））；
}
};
itemTracker.init（）；
})();
});

原因是您已绑定类名以单击事件；这意味着事件处理程序将为类名为complete的HTML元素的数量触发

因为在事件处理函数中有e参数，所以请尝试使用e.target，它将给出单击的元素

var completedItem = function(e) {
    console.log(e.target);
}

---

原因是您已经将类名绑定到click事件；这意味着事件处理程序将为类名为complete的HTML元素的数量触发

因为在事件处理函数中有e参数，所以请尝试使用e.target，它将给出单击的元素

var completedItem = function(e) {
    console.log(e.target);
}

---

这是因为每次添加一个新项目时，您都会得到class.complete

var complete=$（“.complete”）的按钮并向其附加操作

因此，如果您添加1个按钮：它将只触发一次。
如果添加两个按钮：第一个按钮将触发两次，第二个按钮将触发一次。
如果添加3个按钮：第一个按钮将触发三次，第二个按钮触发两次，第三个按钮触发一次。
等等

您可以通过替换来修复它：
var complete=$（“.complete”）
对于：
var complete=$（listItem）。查找（“.complete”）
第36行

这将确保它仅选择您此时正在创建的列表项中的.complete按钮。
这是因为每次添加新项时，您都会获得所有带有类的按钮。complete
var complete=$（“.complete”）并向其附加操作

因此，如果您添加1个按钮：它将只触发一次。
如果添加两个按钮：第一个按钮将触发两次，第二个按钮将触发一次。
如果添加3个按钮：第一个按钮将触发三次，第二个按钮触发两次，第三个按钮触发一次。
等等

您可以通过替换来修复它：
var complete=$（“.complete”）
对于：
var complete=$（listItem）。查找（“.complete”）
第36行

这将确保它只选择此时正在创建的列表项中的.complete按钮。
在代码中，您使用的是
var complete=$（“.complete”）；
查找完整按钮。因此，在添加第二个条目时，
$（.complete”）
将返回2个元素，这也会将事件附加到先前的节点。
在jquery中包装完整按钮的方法如下

var buttonComplete = $('<button class="complete">Complete</button>')


$（文档）.ready（函数（）{
（功能（）{
var itemTracker={
//初始化
init:function（）{
这是bindEvents（）；
},
//缓存区
缓存区：{
inputAdd:$（“#inputAdd”），
submitAdd:$（“#submitItem”），
listContent:$（“#listContent”），
已完成：$（“#已完成”）
},
//添加项
附加项：函数（）{
var index=this.cacheDom.listContent.children（）.length；
var itemValue=this.cacheDom.inputAdd.val（）；
var listItem=$（“
”）；
var buttonRemove='Remove'；
var buttonComplete=$（'Complete'）
追加（itemValue）；
listItem.append（按钮删除）；
listItem.append（按钮完成）；
var itemContent=this.cacheDom.listContent.append（listItem）；
this.cacheDom.inputAdd.val（“”）；
//删除项目
var remove=$（'.remove'）；
删除。打开（“单击”，功能（e）{
$（e.target）.最近的（“li”）.hide（）；
});
var complete=$（“.complete”）；
//完整项目
var completedItem=函数（e）{
console.log（this）；
//var childParent=$（this.parent（）；
//var rootParent=childParent.parent（）；
//var parentId=rootParent.pr
var buttonComplete = $('<button class="complete">Complete</button>')

buttonComplete.on("click", completedItem);