解绑动态创建的编辑按钮

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

解绑动态创建的编辑按钮

Unbind the dynamically created edit button

jquery

events

button

dynamic

unbind