JQuery函数不能在Bootstrap模式下工作

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

继承人的代码：

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

来源

2014-09-20 user3993537

看到任何控制台错误??? – 2014-09-20 05:43:01

没有，没有控制台错误 – user3993537 2014-09-20 05:43:52

你面临的实际问题是什么......你的表单没有提交或其他东西？ – 2014-09-20 05:45:21

代替

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

尝试

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

来源

2014-09-20 05:52:14

@ user3993537 ...我想以上答案将解决您的问题，如果需要更多的帮助，然后PLZ评论... – 2014-09-20 08:01:50

仍然不工作@Kartikeya我认为它有一些东西使用Bootstrap的模式。 – user3993537 2014-09-20 22:01:40

-1

，而不是

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

试试

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

来源

2014-09-20 05:59:31

我知道这个问题很旧，但我有同样的问题。我在Joomla平台上工作，虽然内联js在表单提交上工作得很好，但任何函数调用或事件触发器都没有。谷歌搜索引导我回到这个问题。

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

来源

2015-08-07 06:36:18 user1634781

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

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

来源

2015-08-07 06:53:52 mokiSRB

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>

来源

2015-08-07 07:08:33 Vignesh

在标题中添加外部脚本。并将事件监听器绑定到模态框的父div，并检查事件的类型是否是选择器中的dom元素的keyup调用事件处理程序 – Vignesh 2015-08-07 07:13:04

JQuery函数不能在Bootstrap模式下工作

回答

相关问题