동적으로 생성 된 편집 버튼의 바인딩 해제

Question

개체의 일부 데이터를 편집하는 동적 단추가 있습니다. 이제 데이터가 성공적으로 업데이트되면 사용자에게 알림이 전송되어 성공적으로 완료되었음을 알립니다.

그러나 사용자가 두 번째 동일한 개체를 편집하면 동일한 경고가 두 번 throw됩니다. 마찬가지로 세 번째 시간 동안 동일한 객체가 업데이트 될 때까지 세 번 반복됩니다.

나는 이것을 수정하고 개체를 편집 할 때마다 한 번만 경고 팝업이 표시되도록하려면 동적 단추에서 click 이벤트의 바인딩을 해제해야한다고 생각합니다. 아래의 코드에서 '.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

아래처럼 click() 외부 submit() 핸들러를 넣고 확인해야합니다 : 이 여기에 코드입니다 -.

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