Javascript 如何停止多次调用函数

我不明白为什么我的代码会触发一个函数的多个调用。我正在创建一个日历应用程序，每次我删除一个事件，它都会增加函数被调用的次数。这一定与for循环有关，我尝试使用“break”来解决这个问题，但没有成功

当用户在日历中打开一天时，它将显示事件。我有一个事件监听器来触发一个模式“您确定要删除事件吗？”

---

如果您能提供任何帮助，我们将不胜感激。

如果您在第一次迭代中打破了循环，为什么需要在此处添加循环

for (var i = 0; i < delModalBtn.length; i++) {
    delModalBtn[i].addEventListener('click', event_del_true,false);
    break;
}

---

每次删除一个元素时，都会向所有

delTrue

元素添加另一个单击侦听器。在其他侦听器中添加事件侦听器几乎总是错误的。。模态-您有一个模态，但每次显示它时，您都会添加一个新的

事件\u del\u true

事件处理程序。将添加

event\u del\u true

的5行移到

delete\u event

方法之外（正如您在设置delete_事件的前5行中所做的那样，请避免将手写JavaScript与jQuery混合使用。如果您使用的是jQuery，那么请使用jQuery。您是对的，我在一个不必要的地方使用了循环，所以我们按照您的建议进行了操作。不幸的是，问题仍然存在。

 function event_del_true(){
 $.ajax({
     type: "POST",
     url: "php/delete-event.php",
     data: {id: id}
 }).done(function() {
     M.toast({
         html: 'Event deleted',
         classes: 'rounded',
         displayLength: 2000,
         inDuration: 375,
         outDuration: 300
     });
 });

for (var i = 0; i < delModalBtn.length; i++) {
    delModalBtn[i].addEventListener('click', event_del_true,false);
    break;
}

// Opens model to prompt event delete
function delete_event(d){
    id = d.currentTarget.id;
    $('#modal-delete').modal('open');
}

// add the event to every button with the class ONCE only
delModalBtn = document.getElementsByClassName('delTrue');
for (var i = 0; i < delModalBtn.length; i++) {
    delModalBtn[i].addEventListener('click', event_del_true,false);
}