자바 스크립트 아약스 성공 함수는 여러 번 발생합니다.

Question

내 프로젝트에서는 테이블에서 행을 삭제하고 데이터베이스에서 .ajax()을 사용하여 행을 삭제하는 작업을하고 있습니다. 사용자가 삭제 버튼을 클릭 할 때를위한 함수를 만들었습니다. 이해할 수 있듯이 몇 개의 행이 있으며 모든 행에는 자체 삭제 단추가 있습니다.

이제 사용자가 처음으로 그 중 하나를 클릭하면 해당 항목을 삭제할 것인지 묻는 질문과 함께 팝업 모달이 나타납니다. 사용자가 예를 클릭하면 팝업이 사라지고 행이 희미 해집니다. 이 모두는 완벽하게 작동하지만 ...

두 번째 삭제 버튼 클릭

페이지를 새로 고침하지 않고, 자바 스크립트는 현재 요청 삭제 (및 id) + 드 이전을 발생합니다. 세 번째로하면 현재의 것과 이전의 두 개를 발사 할 것입니다.

현재 var $(this).attr('data-page-id');을 비우려고했으나 .ajax() 성공 함수가 실행되면 여전히 동일한 작업을 수행합니다. 당신의 외부 클릭 이벤트 핸들러가

$('a.btn-page-delete').click(function() { 

그것을거야 .bind() 다른 클릭 이벤트 처리기 $('a#action-confirm')에 매번

을 호출되는

$('a.btn-page-delete').click(function() { 

    var curPageId = $(this).attr('data-page-id'); 

    $('#delete-page').modal('show'); 

    $('a#action-confirm').click(function() { 

     $.ajax({ 

      type  : 'POST', 
      url  : '/pages/async/delete', 
      dataType : 'json', 
      data  : { page : curPageId }, 
      success : function(data) { 

       $('#delete-page').modal('hide'); 

       console.log(curPageId); 
       console.log(data); 

      }, 
      error : function() {} 

     }); 

    }); 

}); 

Answer 1

. 따라서 외부 이벤트가 실행될 때마다 하나 이상의 이벤트 처리기를 추가합니다.

나는 당신이하고 빌드를 다시하고 더 나은 방법이를 구성해야 할 수 있습니다 확신 해요,하지만 현재 상태에서 유일한 선택은

$('a#action-confirm').off('click').click(function() { 

처럼 .unbind()/.off() 내부 클릭 처리기입니다 이전에 jQuery를 통해 바인딩 된 모든 클릭 이벤트 핸들러를 제거합니다.

심판 : .off()