防止多次点击事件并更改目标值
防止多次点击事件并更改目标值
提问于 2018-07-06 01:10:56
我有一个用户界面在一个表中的用户列表。每个条目/用户都有两个按钮。其中一个按钮是“检查”按钮。
<button type="submit" id="$id_from_db" class="bg-aqua btnCheckUser">Check</button>当为特定用户单击复选按钮时，将向服务器发送POST请求。当请求加载时，应禁用所有按钮，启动请求的按钮应将其类从bg-puple更改为bg-aqua，并将其文本从Check更改为Checking...。如果请求返回错误(由值为1的result指示)，则按钮应该将其类从bg-aqua更改为bg-danger。如果没有错误，类应该从bg-aqua更改为bg-navy，文本从Checking...更改为User Okay。
我可以做到这一点，但它不仅会影响启动请求的按钮，还会影响所有按钮。
这是我的代码：
$(document).on("click", ".btnCheckUser", function() {
var Item_Number = $(this).attr("Item_Number");
/************************** MANIPULATE BUTTONS *******************************************************************************/
$(this).removeClass('bg-purple').addClass('bg-aqua');
$(this).html('Checking ...');
$(this).attr("disabled", true);
$('.btnViewUser').attr("disabled", true);
/******************************* PROCESS AJAX **************************************************************************/
var value = {
Item_Number: Item_Number
};
$.ajax({
url: "./plugins/serverside/CheckUserStatus",
type: "POST",
data: value,
success: function(data, textStatus, jqXHR) {
var data = jQuery.parseJSON(data);
if (data.result == 1) {
$(this).removeClass('bg-aqua').addClass('bg-danger');
$("#CheckUser").html('Failed!');
$('.btnCheckUser').attr("disabled", false);
$('.btnViewUser').attr("disabled", false);
setTimeout(function() {
var table = $('#User_Table').DataTable();
table.ajax.reload(null, false);
}, 3500);
} else if (data.result == 2) {
//------------------------ IF User Okay -------------------------------------------------------------------------------------------------------------------
$("#CheckUser").removeClass('bg-aqua').addClass('bg-navy');
$("#CheckUser").html('User Okay');
$('.btnCheckUser').attr("disabled", false);
$('.btnViewUser').attr("disabled", false);
}我如何解决这个问题，并且只影响启动请求的按钮，但在加载请求时仍然禁用所有按钮？
回答 1
Stack Overflow用户
发布于 2018-07-06 01:23:06
你好，这真的很简单，你要做的是
function TheClickerFunction(){
$("body").on("click",".YourButton",function(){
//this will only affect the clicked element
$(this).attr("disabled",true);
});
}
$(document).ready(function(){
TheClickerFunction();
});
/*
i think creating a global counter and increment it on each element would b better*/
var GlobalCounter= 0;
function DynamicBuilder(){
var stringBuilder="";
for(var i = 0; i< lengthOfYourElement ; i++){
GlobalCounter+=1;
stringBuilder+="<input type='submit' id='myButton"+GlobalCounter+"'></input>";
}
$("body").append(stringBuidler);
}
in this way each time a click is made
$(".yourClass").click(function(){
var elementID = $(this).attr("id");
//here you can do what ever you want with its id
})
*/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51196762
复制相关文章
相似问题
腾讯云开发者
