防止Ajax调用中的JavaScript中的默认行为或标记单击事件 [英] Prevent Default Behavior or A Tag Click Event in JavaScript Inside Ajax Call
问题描述
我过去曾经使用 e.preventDefault()
来取消点击事件,但是我很难弄清楚为什么它在这种情况下不起作用。我在具有类名的列中分配了所有标签,然后使用 document.queryselectorAll(.classname)
获取对它们的引用,然后为每个标签添加一个click事件,来自服务器的值,如果不满足验证条件,则应阻止默认值并提供用户消息。
I have used e.preventDefault()
in the past to cancel a click event, but I am having trouble figuring out why it isnt working in this scenario. I assigned all a tags in a column with a classname, then get references to them with document.queryselectorAll(.classname)
, then for each a tag add a click event that gets values from server, and if validation not met should prevent default and give user message.
(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()。
您可以执行此操作。
It's not working because, the response is asynchronous. e.preventDefault() will be executed only after ajax call gets a response from the server. You can do this.
- 阻止所有操作的默认操作。
- 等待
- 如果响应不是1,则取消绑定preventDefault()。
I更新了for循环,并注释了更改。
I have updated the for loop, and commented the changes. Kindly do check.
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);
}
这篇关于防止Ajax调用中的JavaScript中的默认行为或标记单击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!