addEventListener触发两次

我正在创建一个简单的电话簿，它将个人姓名，姓氏和电话添加到一个div中，并添加到DOM中，并带有单击事件删除此div的选项。我有一个名为电话簿类包含这两个函数：由于某种原因的addEventListener是射击两次addEventListener触发两次

//add an event button to all divs inside the DOM 
this.deleteBtnEvent = function(){ 
    var _this = this; 
    //get all the divs that currently on the DOM 
    var deleteBtn = document.getElementsByClassName('delete'); 
    for (var i = 0; i < deleteBtn.length; i++) { 
     deleteBtn[i].addEventListener('click', function(e){ 
      _this.removeContact(e.target.parentElement.attributes.index.value); 
     }); 
    } 
}; 

//remove the div from the array and from the DOM 
this.removeContact = function(index){ 
    var contactsHolder = document.getElementById('contacts'); 
    var contact = document.getElementsByClassName('contact'); 
    this._contacts.splice(index, 1); 

    contactsHolder.removeChild(contact[index]); 

    //update localstorage 
    var stringArr = JSON.stringify(this._contacts); 
    localStorage.setItem('data', stringArr); 

    console.log('current: '); 
    console.log(this._contacts); 
};

。第一次调用addEventListener，函数从DOM和数组中删除div，第二次侦听器被触发，我得到一个错误，因为具有相同ID的div不存在，因为它已经存在删除。我想知道是否有办法解决这个问题。

来源

2016-07-16 Morta 1

由于您将点击事件绑定了两次，所以会触发两次。 – dfsq

你可以做一个小提琴或附加代码中的整个片段（至少一个小副本）。所以我可以在我的最后复制它。 – Ayan

https://jsfiddle.net/Lshf1cdx/ –

在addContact()中，您可能会调用this.deleteBtnEvent()，推测可能会将删除绑定到刚刚添加的删除按钮。然而，在deleteBtnEvent()中，您正在绑定一个事件监听器，以便全部删除页面上的按钮。这意味着以下将发生：

添加联系人。一个新的联系人将显示一个带有监听器的删除按钮。
添加第二个联系人。一个新的联系人将显示一个删除按钮，其中有一个收听者，和第二个收听者将被添加到第一个按钮。
添加第三个联系人。一个新的联系人会出现一个删除按钮，其中有一个监听器，和第三个监听器将被添加到第一个按钮，第二个监听器将被添加到第二个按钮。
等....

所以，deleteBtnEvent()，不添加（一式两份）听众都删除按钮。相反，只能将侦听器添加到刚刚通过addContact()创建的删除按钮。

来源

2016-07-16 10:38:58 jessepinho

addEventListener触发两次

回答

相关问题