[英]Ajax call multiple time onclick event on bootstrap modal
通過點擊一個按鈕它加載了一個引導模式。 在模態上有一個表單,點擊保存按鈕我試圖通過ajax調用提交表單。 第一次ajax調用觸發一次,但第二次ajax url觸發兩次。 我在螢火蟲控制台部分看到帖子網址被多次調用。
這是我的 jquery 代碼。
$(".show-modal").click(function() {
$('.upload-modal').modal();
$(".save-logo").click(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
data : data,
contentType: false,
cache : false,
processData: false,
url : "../../io/upload/"
}).done(function(rawData) {
$('.modal-header .close').click();
})
});
})
問題是您在 .show-modal 單擊處理程序中有您的 .save-logo 單擊處理程序。 因此,每次顯示模態時,您都會將另一個單擊處理程序附加到 .save-logo 元素。 下面的代碼應該可以解決這個問題:
$(".show-modal").click(function () {
$('.upload-modal').modal();
});
$(".save-logo").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
data: data,
contentType: false,
cache: false,
processData: false,
url: "../../io/upload/"
}).done(function (rawData) {
$('.modal-header .close').click();
})
});
$(function(){
var editUserId;
$('#edit-user-modal').on('show.bs.modal', function(e) {
editUserId = $(e.relatedTarget).data('userid');
});
$("#edit-user-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var route = "/edit-user/" + editUserId;
if(validateEditUserForm()){
$.ajax({
type: "POST",
url: route,
data: form.serialize(),
success: function(Response)
{
if(Response){
console.log(Response.status);
console.log(Response.message);
if(Response.status == 'success'){
$('#adduser-alert-box').hide();
$("#add-user-form")[0].reset();
$('#adduser-success-box').show();
$('#adduser-success-box').html(Response.message);
}
else{
console.log('User could not be added');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html(Response.message);
}
}
else{
console.log('No Response');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html('No Response');
}
}
});
}
else{
console.log('Validation Error');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html('Please Fill All the Fields Correctly');
}
});});
我遇到了同樣的問題,隨機嘗試了一些東西。 因此,如果您創建一個全局變量來存儲您從按鈕傳遞的 'id' 然后存儲來自按鈕的 'data' 屬性的 id,那么它不會在單擊時發出多個請求,因為您已經全局聲明了該變量!
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.