javascript 在运行时删除函数以避免 "multicall"

Question

我有一个 javascript/jquery 函数:

function deleteRecordByClick(){
    $('.deleteRecord').click(function(){
        alert("deleting record");
        var confirmMsg = confirm('Are you sure you want to delete record?');    
        if(confirmMsg){  
            alert(idRecordToDelete);  // fires the correct id to delete
            ajaxDeleteRecord(idRecordToDelete); //my own ajax working properly      
        }               
    });
}

这会从 Accordion 集中删除记录。每个 Accordion 都是动态创建的，并且有一个带有“.deleteRecord”类的按钮。现在该函数已正确调用，但如果我添加 N 条记录，当我单击随机 Accordion 时，即使数据库上的删除显然仅第一次正确触发，函数也会被调用 N 次，但我收到 N 条确认消息。我在创建记录时调用该函数:

function addNewAccordion(){
   //.... my code to add accordion with
   // <h3 ... class="deleteRecord">
   deleteRecordByClick(); //here I call the function
}

是否有一种方法可以销毁该函数并重新创建它，或者有更好的方法来解决我的问题？谢谢

Answer 1

当您每次创建 Accordion 时运行该函数时，它将向之前创建的每个 Accordion 添加另一个事件处理程序。

您可以首先创建所有 Accordion ，然后调用该函数一次，或者您可以在每次调用时将对特定 Accordion 元素的引用发送到函数中:

deleteRecordByClick(accordion);

在该函数中，您将使用引用来限制您在该 Accordion 内的搜索:

function deleteRecordByClick(accordion){
  $('.deleteRecord', accordion).click(function(){
  ...
}