Question

由于某种原因，我的JQuery不能处理我的引导模式。表单的JQuery函数在原始页面上工作正常，但在模态上没有。有人可以告诉我或向我解释为什么会发生这种情况。谢谢！

下面是代码：

<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>

Answer 1

而不是

$(document).ready(function () {
  $("#password_new_again").keyup(checkPasswordMatch);
});

尝试

$(document).ready(function () {
  $(document).on('keyup','#password_new_again',function(){
    checkPasswordMatch();
  });
});

Answer 2

我知道这个问题很老，但我遇到了同样的问题。我正在使用Joomla平台，虽然内联js在表单提交上工作正常，但任何函数调用或事件触发器都没有。谷歌搜索让我想到了这个问题。

当我检查我正在处理的页面的源代码时，似乎组件再次加载jQuery。所以我的页面现在有两个jQuery实例。删除组件加载的实例，保留主要实例解决了我的问题。所以这也可能是这种情况的罪魁祸首。

Answer 3

如果您使用Joomla JQuery框架，则可以使用jQuery而不是$来访问它。所以你的代码应该是这样的：

jQuery(document).ready(function () { //code here });

Answer 4

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 5

而不是

$(document).ready(function () {
  $("#password_new_again").keyup(checkPasswordMatch);
});

试

$(document).ready(function () {
    $("#password_new_again").keyup(function(){
         checkPasswordMatch();
    });
});

JQuery函数在Bootstrap Modal中不起作用

5 个答案: