Die dynamisch erstellte Bearbeitungsschaltfläche entbinden

Question

Ich habe eine dynamische Schaltfläche, um einige Daten für ein Objekt zu bearbeiten. Jetzt, nachdem die Daten erfolgreich aktualisiert wurden, erhalte ich eine Warnung an den Benutzer, die besagt, dass die Daten erfolgreich verarbeitet wurden.

Wenn der Benutzer das gleiche Objekt zum zweiten Mal bearbeitet, wird jedoch zweimal dieselbe Warnung ausgegeben. Gleichermaßen dreimal, wenn das gleiche Objekt zum dritten Mal aktualisiert wird und so weiter.

Ich glaube, ich muss das click -Ereignis auf der dynamischen Schaltfläche lösen, um dies zu beheben und sicherstellen, dass die Warnung nur einmal jedes Mal erscheint, wenn das Objekt bearbeitet wird. Wie kann ich das Click-Ereignis auf der Schaltfläche ".edit-btn" in meinem Code unten lösen? Hier ist der Code:

$(document).on('click', '.edit-btn', function(){ 
    var objIndex = $(this).parents('.parent').index(); 
    $('#updateForm').submit(function(e){ 
     updataData(objIndex); 
     return false; 
    }) 
}); 

function updateData(oldObjIndex){ 
    // I've the code here to grab the new values from the form 

    /* Assign the new values to the new object */ 
    var newObj = { 

     "key1" : value1, 
     "key2" : value1, 
     "key3" : value1, 
     "key4" : value1, 

    } 
    savedData.splice(oldObjIndex, 1, newObj); 
    alert('Updated successfully!'); 
} 

Answer 1

Need submit() Handler außerhalb click() wie unten zu setzen und prüfen: -.

$(document).ready(function(){ 
    var objIndex = ''; 
    $(document).on('click', '.edit-btn', function(){ 
     var objIndex = $(this).parents('.parent').index(); 
    }); 

    $('#updateForm').submit(function(e){ 
     updataData(objIndex); 
     return false; 
    }) 
}); 
function updateData(oldObjIndex){ 

    var newObj = { 
     "key1" : value1, 
     "key2" : value1, 
     "key3" : value1, 
     "key4" : value1, 
    } 
    savedData.splice(oldObjIndex, 1, newObj); 
    alert('Updated successfully!'); 
}