JavaScriptでデフォルトの動作やタグのクリックを防止するAjaxコールの中で

Question

私は過去にe.preventDefault()を使用してクリックイベントをキャンセルしましたが、このシナリオでは動作しない理由を理解できません。私はクラス名を持つ列のすべてのタグを割り当てた後、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. レスポンスが1でない場合は、preventDefault（）をアンバインドします。

私はforループを更新し、変更をコメントしました。親切にチェックしてください。

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