JQuery函数在Bootstrap Modal中不起作用答案

【问题标题】：JQuery function not working in Bootstrap ModalJQuery函数在Bootstrap Modal中不起作用
【发布时间】：2014-09-20 05:41:15
【问题描述】：

由于某种原因，我的 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>

【问题讨论】：

查看控制台错误？？？
不，没有控制台错误
您面临的实际问题是什么……您的表单没有提交或其他什么？？
该功能不起作用@Kartikeya

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案1】：

代替

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

试试

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

【讨论】：

@user3993537...我认为如果需要更多帮助，上述答案将解决您的问题，然后请评论...
仍然无法工作@Kartikeya 我认为这与 Bootstrap 的模式有关。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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>

【讨论】：

在 header 中添加外部脚本。并将事件侦听器绑定到模态框的父 div 并检查事件类型是否是选择器中针对的 dom 元素上的 keyup 调用事件处理程序

【解决方案5】：

而不是

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

试试

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

【讨论】：