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模式下工作

回答

相關問題