jQuery功能在Bootstrap Modal中不起作用
[英]JQuery function not working in Bootstrap Modal
问题描述
For some reason my JQuery is not working on my bootstrap modal. 
出于某种原因，我的jQuery是不工作的我的引导模式。 The form's JQuery function is working fine on the original page, but not on the modal. 表单的JQuery函数在原始页面上运行良好，但在模式页面上却无法正常工作。 Can someone please tell me or explain to me why this is occurring. 有人可以告诉我或向我解释为什么会这样。 Thanks! 谢谢！
Heres the code: 这是代码：
<div class="modal fade in" id="changepw" tabindex="-1" role="dialog" aria-labelledby="changepwlabel" aria-hidden="false" style="display: block;">
<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" id="changepwlabel">Change Password</h4>
</div>
<div class="modal-body" id="changepwdiv">
<script src="js/jquery-1.10.2.min.js"></script>
<form action="changepassword.php" method="post">
<div class="input-group">
<span class="input-group-addon">Current Password</span>
<input class="form-control" type="password" name="Password" id="Password">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">New Password</span>
<input class="form-control" type="password" name="password_new" id="password_new">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">New Password Again</span>
<input class="form-control" type="password" name="password_new_again" id="password_new_again">
</div>
<br>
<input type="submit" value="Change" id="change" class="btn btn-success" disabled="">
<input type="hidden" name="token" value="e642d82eed2e2a90529d9debbef45eec">
</form>
<script>
function checkPasswordMatch() {
var password = $("#password_new").val();
var confirmPassword = $("#password_new_again").val();
if (password == confirmPassword)
document.getElementById("change").disabled = false;
else
document.getElementById("change").disabled = true;
}
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
</script> </div>
</div>
</div>
</div>
5 个解决方案
解决方案1
1 2014-09-20 05:52:14
Instead of 代替
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
Try 尝试
$(document).ready(function () {
$(document).on('keyup','#password_new_again',function(){
checkPasswordMatch();
});
});
解决方案2
0 2015-08-07 06:36:18
I know this question is old, but I had the same problem. 我知道这个问题很旧，但是我有同样的问题。 I was working on the Joomla platform and while inline js worked fine on the form submit, any function calls or event triggers did not. 我在Joomla平台上工作，而内联js在表单提交上工作正常，但任何函数调用或事件触发器都没有。 Googling led me to this question. 谷歌搜索使我想到了这个问题。
When I checked the source code of the page I was working on, it seemed that a component was loading jQuery again. 当我检查正在处理的页面的源代码时，似乎组件正在再次加载jQuery。 So my page now had two instances of jQuery. 所以我的页面现在有两个jQuery实例。 Removing the instance loaded by the component keeping the main one solved the problem for me. 删除由组件加载的实例并保留主要实例对我来说解决了这个问题。 So this could be the culprit in this case as well. 因此，在这种情况下，这也可能是罪魁祸首。
解决方案3
0 2015-08-07 06:53:52
If you using Joomla JQuery framework you can access it with jQuery instead of $ . 如果使用Joomla JQuery框架，则可以使用jQuery而不是$进行访问。 So Your code should look like this: 因此，您的代码应如下所示：
jQuery(document).ready(function () { //code here });
解决方案4
0 2015-08-07 07:08:33
function checkPasswordMatch() { alert("ddd") var password = $("#password_new").val(); var confirmPassword = $("#password_new_again").val(); if (password == confirmPassword) document.getElementById("change").disabled = false; else document.getElementById("change").disabled = true; } $(document).ready(function () { $("#changepw").on("keyup","#password_new_again",checkPasswordMatch); });
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div class="modal fade in" id="changepw" tabindex="-1" role="dialog" aria-labelledby="changepwlabel" aria-hidden="false" style="display: block;"> <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" id="changepwlabel">Change Password</h4> </div> <div class="modal-body" id="changepwdiv"> <script src="js/jquery-1.10.2.min.js"></script> <form action="changepassword.php" method="post"> <div class="input-group"> <span class="input-group-addon">Current Password</span> <input class="form-control" type="password" name="Password" id="Password"> </div> <br> <div class="input-group"> <span class="input-group-addon">New Password</span> <input class="form-control" type="password" name="password_new" id="password_new"> </div> <br> <div class="input-group"> <span class="input-group-addon">New Password Again</span> <input class="form-control" type="password" name="password_new_again" id="password_new_again"> </div> <br> <input type="submit" value="Change" id="change" class="btn btn-success" disabled=""> <input type="hidden" name="token" value="e642d82eed2e2a90529d9debbef45eec"> </form> </div> </div> </div> </div> </body> </html>
解决方案5
-1 2014-09-20 05:59:31
instead of 代替
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
try 尝试
$(document).ready(function () {
$("#password_new_again").keyup(function(){
checkPasswordMatch();
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.