[英]event.preventDefault() with .on('click') doesn't prevent default behavior
[英]Prevent Default Behavior or A Tag Click Event in JavaScript Inside Ajax Call
我過去曾使用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);
}
})();
它不起作用,因為響應是異步的。 只有在ajax調用從服務器獲得響應后,才會執行e.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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.