Question

I’ve a javascript/jquery function:

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      
        }               
    });
}

Which removes records from an accordion set. Each accordion is created dinamically and has a button with “.deleteRecord” class. Now the function is called properly but if i add N records, when i click on a random accordion, function is called N times even if obviously the delete on database fires only the first time and correctly, but i receive N confirm messages. I call the function when the record is created:

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

Is there a method to destroy the function and recreate it or something better to resolve my issue? Thanks

Answer 1

As you run the function each time you create an accordion, it will add another event handler to each of the previously created accordions.

You can first create all accordions and then call the function once, or you can send a reference to the specific accordion element into the function for each call:

deleteRecordByClick(accordion);

In the function you would use the reference to limit your search within that accordion:

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