当我们多次打开modal时，会触发多个ajax调用

我有一个引导模式，它在ajax调用后加载到DOM。我的模式对话框中有两个按钮。当我单击对话框模式中的#proceed按钮时，我必须调用ajax请求。当我单击Cancel按钮时，模态将立即关闭。问题是，当我单击#proceed按钮时，它将激发ajax请求到我单击模态对话框的总次数。简单地说，我已经点击了4次模态对话框，并点击了Cancel按钮关闭，当我第5次点击#proceed按钮时，它将触发5次ajax调用。我尝试了很多方法来重置模式对话框，但都不起作用。

Modal dialog Code:
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Warning!!</h4>
</div>
<div class="modal-body">
The details entered cannot be edited later.Are you sure to proceed?
</div>
<div class="modal-footer">
<button type="button"id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="proceed">Proceed</button>
</div>
</div>
</div>
</div>

$(document).on("click", '#confirm button#proceed', function(e) {
$('#confirm').modal('toggle');
});
$(document).on("click", '#confirm button#proceed', function(e) {
e.preventDefault();
$('#confirm').modal('toggle');
$.ajax({
type: 'POST',
url: "module/parents/covidqur/process.php",
processData: false,
contentType: false,
data: formData,
dataType:'text',
success:function(response){
console.log(5656565);

}
});
});

在发出第一个AJAX请求时禁用该按钮。它将阻止第二个AJAX请求。

您已经在#confirm button#proceed上绑定了两次点击事件，请尝试以下代码：

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">
Launch demo modal
</button>
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Warning!!</h4>
</div>
<div class="modal-body">
The details entered cannot be edited later.Are you sure to proceed?
</div>
<div class="modal-footer">
<button type="button"id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="proceed">Proceed</button>
</div>
</div>
</div>
</div>


<script>
$(document).on("click", '#confirm button#proceed', function(e) {
$('#confirm').modal('toggle');
$.ajax({
type: 'POST',
url: "module/parents/covidqur/process.php",
processData: false,
contentType: false,
data: null,
dataType:'text',
success:function(response){
console.log(5656565);
},
complete: function() {
alert("An ajax request was fired.");
}
});
});  
</script>
</body>
</html>

我也遇到了同样的问题，解决方案是从#proceed按钮取消绑定点击。

$(document).on("click", '#confirm button#proceed', function(e) {
$('#confirm').modal('toggle');
$("#proceed").off('click').on('click', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: "module/parents/covidqur/process.php",
processData: false,
contentType: false,
data: formData,
dataType:'text',
success:function(response){
console.log(5656565);
$('#confirm').modal('hide');

}
});
});  
});

我在模态按钮的点击事件中添加了以下代码。这对我有效

$(document).on("click", '#proceed', function(e) {
e.stopImmediatePropagation();
e.preventDefault();
$('#confirm').modal('toggle');
--ajax call
});

相关内容

最新更新

热门标签：