解除绑定动态创建的编辑按钮

Question

我有一个动态按钮来编辑对象的一些数据。 现在，一旦数据成功更新，我会向用户发出警报，说明它已成功完成。

但是，当用户第二次编辑同一个对象时，它会引发两次相同的警报。同样，当同一个对象第三次更新时三次，以此类推。

我相信，我需要取消绑定动态按钮上的点击事件来解决这个问题，并确保每次编辑对象时只弹出一次警报。 如何在下面的代码中取消绑定“.edit-btn”按钮上的点击事件？ 代码如下：

$(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

需要将submit() 处理程序放在click() 之外，如下所示并检查：-

$(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!');
}