| "+ data.username + "</td>"+ "<td>"+ data.comment + "</td></tr>";$("#commentTable").append(newHTMLContent);alert("评论已添加！");},错误:函数(errorMsg){alert("在ajax中添加注释时出错");}});},错误:函数(errorMsg){alert("登录错误");}});} 别的 {alert('缺少用户名或密码.');}}); Bootstrap Modal fires action one time and if I click again it will fire up twice and so on. <div id="loginModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log In</h4>
</div>
<div class="modal-body">
<h3>Username</h3>
<input type="text" id="userLogin" placeholder="Username">
<h3>Password</h3>
<input type="password" id="pwdLogin" placeholder="Password">
<br>
<br>
<input type="checkbox" id="rememberMe">Remember Me
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btnLogin">Log In</button>
</div>
</div>
</div>
</div>
Here's the span that fires the modal. <span id="comment"><a id="testComment" data-toggle="modal" href="#loginModal" class="btn btn-default">Add comment</a></span>
After I click the span the modal shows. I click the #btnLogin and then the action fires up one time, two times and so on.
javascript that interacts with the modal(the action is within the span click): $("#testComment").click(function (event) {
if ($("#msg").val() == "" || $("#nombre").val() == "") {
alert("To send a comment fill your mail and message!");
event.stopPropagation();
}
else {
$("#btnLogin").click(function () {
alert("this also");
$(this).off('shown.bs.modal');
if ($("#userLogin").val() != "" && $("#pwdLogin").val() != "") {
var dataToSend = {
"action": "LOGIN"
, "username": $("#userLogin").val()
, "password": $("#pwdLogin").val()
, "remember": $("#rememberMe").is(":checked")
}
$.ajax({
url: "data/applicationLayer.php"
, type: "POST"
, data: dataToSend
, dataTpe: "json"
, success: function (jsonData) {
var data = {
"comment": $("#msg").val()
, "username": $("#username").val()
}
$.ajax({
url: "data/addComment.php"
, type: "POST"
, data: data
, dataType: "text"
, success: function (dataResponse) {
var newHTMLContent = "";
newHTMLContent += "<tr><td>" + data.username + "</td>" + "<td>" + data.comment + "</td></tr>";
$("#commentTable").append(newHTMLContent);
alert("Comment was added!");
}
, error: function (errorMsg) {
alert("Error adding comment in ajax");
}
});
}
, error: function (errorMsg) {
alert("Login Error");
}
});
}
else {
alert('Missing username or password.');
}
});
}
});
解决方案 Just put $("#btnLogin").click event outside. Here is the my code or go with below link may be it can help you.
JSFiddle
JAVSCRIPT $("#testComment").click(function(event) {
if ($("#msg").val() == "" || $("#nombre").val() == "") {
alert("To send a comment fill your mail and message!");
event.stopPropagation();
}
});
$("#btnLogin").click(function() {
alert("this also");
$(this).off('shown.bs.modal');
if ($("#userLogin").val() != "" && $("#pwdLogin").val() != "") {
var dataToSend = {
"action": "LOGIN",
"username": $("#userLogin").val(),
"password": $("#pwdLogin").val(),
"remember": $("#rememberMe").is(":checked")
}
$.ajax({
url: "data/applicationLayer.php",
type: "POST",
data: dataToSend,
dataTpe: "json",
success: function(jsonData) {
var data = {
"comment": $("#msg").val(),
"username": $("#username").val()
}
$.ajax({
url: "data/addComment.php",
type: "POST",
data: data,
dataType: "text",
success: function(dataResponse) {
var newHTMLContent = "";
newHTMLContent += "<tr><td>" + data.username + "</td>" + "<td>" + data.comment + "</td></tr>";
$("#commentTable").append(newHTMLContent);
alert("Comment was added!");
},
error: function(errorMsg) {
alert("Error adding comment in ajax");
}
});
},
error: function(errorMsg) {
alert("Login Error");
}
});
} else {
alert('Missing username or password.');
}
});
这篇关于Bootstrap 模态启动时间递增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
|
