방지 기본 동작 또는 내가 클릭 이벤트를 취소 과거에 <code>e.preventDefault()</code>을 사용했지만, 나는 그것이이 시나리오에서 일하고 밤은 이유를 알아내는 데 문제가 있어요

Question

자바 스크립트 내부 아약스 통화에서 태그를 클릭 이벤트. 나는 각 태그의 서버에서 값을 가져옵니다 클릭 이벤트를 추가하고, 검증이 충족되지 않을 경우 기본을 방지하고 사용자 메시지를 제공해야 다음, document.queryselectorAll(.classname) 그들에 대한 참조를 얻을, 클래스 명으로 열에서 모든 태그를 할당.

(function(){ 
const userName = document.getElementById('FullName').value; 

// route 
$route = ''; 
if (CheckDeploy(window.location.origin)) { 
    $route = '/x/GetReviewerCheck/'; 
} else { 
    $route = '/servername/s/GetReviewerCheck/'; 
} 

let ReviewButtons = document.querySelectorAll('.verifyReviewer'); // .verifyReviewer = className of all a tags in table column 

for (var i = 0; i < ReviewButtons.length; i++) { 
    const ReviewButton = ReviewButtons[i]; 
    ReviewButton.addEventListener('click', function (e) { 
     let newRow = ReviewButton.parentElement.parentElement; 
     let AuditorName = newRow.cells[2].innerText; 
     let ReviewType = newRow.cells[8].innerText; 

     let ReviewTypeID = 0; 
     if (ReviewType == 'Peer Review') { 
      ReviewTypeID = 3; 
     } else if (ReviewType == 'Team Leader Review') { 
      ReviewTypeID = 4; 
     } 
     else if (ReviewType == 'Supervisor Review') { 
      ReviewTypeID = 5; 
     } 

     let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1]; 

     $.ajax({ 
      url: $route, 
      type: 'POST', 
      data: { userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id }, 
      success: function (data) { 
       // if data is 1, prevent default 
       if(data == 1){ 
        e.preventDefault(); 
        return false; 
       } 
      } 
     }); 

    }, false); 
} 
})(); 

Answer 1

응답이 비동기이기 때문에 작동하지 않습니다. e.preventDefault()는 ajax 호출이 서버로부터 응답을받은 후에 만 ​​실행됩니다. 이 작업을 수행 할 수 있습니다. 모든 작업

1. 방지 기본 동작입니다. 응답
2. 기다립니다.
3. 응답 한 후에서 preventDefault 바인딩을 해제 할 수없는 경우().

나는 루프에 대한 업데이트 및 변경 사항을 주석했다. 친절하게 확인하십시오.

for (var i = 0; i < ReviewButtons.length; i++) { 
     const ReviewButton = ReviewButtons[i]; 
     ReviewButton.addEventListener('click', function (e) { 
      let newRow = ReviewButton.parentElement.parentElement; 
      let AuditorName = newRow.cells[2].innerText; 
      let ReviewType = newRow.cells[8].innerText; 

      let ReviewTypeID = 0; 
      if (ReviewType == 'Peer Review') { 
       ReviewTypeID = 3; 
      } else if (ReviewType == 'Team Leader Review') { 
       ReviewTypeID = 4; 
      } 
      else if (ReviewType == 'Supervisor Review') { 
       ReviewTypeID = 5; 
      } 

      let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1]; 

      $.ajax({ 
       url: $route, 
       type: 'POST', 
       data: { userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id }, 
       beforeSend:function() 
       { 
        e.preventDefault(); //Prevent default action for all instances. 
       }, 
       success: function (data) { 
        // if data is 1, prevent default 
        if(data != 1){ 
         $(this).unbind('click'); // Restores the click default behaviour if data != 1 
         return false; 
        } 

       } 
      }); 

     }, false); 
    }