[英]shown.bs.modal fires multiple times when you close and reopen modal
[英]Bootstrap modal fires twice when close and reopen
我有一个通过单击按钮调用的登录表单模式。 模态是从外部文件以ajax加载调用的。 但是,如果我关闭并重新打开模态。 模态将启动两次,并且将出现双模态背景类,并且我无法使用模态和功能。 另外,我发现控制台消息出现:[DOM]找到2个具有唯一ID #loginForm:的元素。
我尝试在模式隐藏时将tp删除模式类。 但是,它不起作用。
// jquery
$('a.login').click(function(event) {
var url = "userlogin.php";
$('.login-container').load(url,function(result){
$('#modalLoginForm').modal({show:true});
});
});
$("#modalLoginForm").on("hidden.bs.modal", function () {
resetMyForm();
$("#modalLoginForm").remove();
});
$('.loginbutton').click(function(event) {
// prevent the default submit
alert("haha");
event.preventDefault();
var form = $('#loginForm');
//alert(form);
$.ajax({
url: "authentication.php",
type: "POST",
// use the forms data
data: form.serialize(),
beforeSend: function() {
console.log( "Processing..." );
},
success: function( response ){
// do sth with the response
if(response == "OK") {
// credentials verified
// redirect
location.reload();
}else{
// credentials incorrect
// append errormessage to modal
form.closest('.modal-body').append('<div class="error text-
danger">*'+response+'</div>');
}
},
error: function( response ) {
console.log(response);
}
});
return false;
});
//index.php
<a href="" class="btn btn-secondary btn-rounded login" data-
toggle="modal">Login</a>
<div class="login-container"></div>
//userlogin.php
<div class="modal fade" id="modalLoginForm" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-light">
<div class="modal-header bg-dark">
<h4 class="col-sm-12 text-center text-white comp ">Sign in</h4>
</div>
<div class="modal-body mx-3">
<div class="container">
<div class="col-sm-12">
<form id="loginForm" method="post">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right"
for="defaultForm-email">Username:</label>
<input type="text" name="username" class="form-control validate">
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<label data-error="wrong" data-success="right"
for="defaultForm-pass">Password:</label>
<input type="password" name="password" class="form-control validate">
</div>
</div>
<form>
</div>
</div>
<div class="modal-footer d-flex justify-content-center bg-primary">
<button type="submit" class="btn btn-default text-white comp
loginbutton">Login</button>
</div>
</div>
</div>
</div>
<script src="js/modal.js"></script>
关闭并重新打开时,我只想启动一个模式。 谢谢你的帮助。
您调用了模式两次:使用data-toggle
和modal
功能
在您的index.php
尝试以下代码:
<a href="" class="btn btn-secondary btn-rounded login">Login</a>
<div class="login-container"></div>
并在调用load
之前将模式已加载到您的页面中添加一些验证
尝试在JS中这样做,请使用“本机”选项显示和隐藏模态aka模态。('toggle')
我的建议是,将除模态主体内的内容之外的所有模态移动到index.php,并在userlogin.php中保留表单(#loginForm),然后为此更改您的JavaScript:
$('a.login').click(function(event) {
var url = "userlogin.php";
$('#modalLoginForm').find('.modal-body').load(url)
$('#modalLoginForm').modal('toggle');
});
$("#modalLoginForm").on("hidden.bs.modal", function () {
resetMyForm();
});
有时,当模式显示重复或直接不起作用时,是因为jQuery或Boostrap导入顺序错误或重复,但是在您的情况下,我认为这只是错误的javascript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.