我正在运行一个项目，需要允许用户更改自己的密码。但是我在我的php文件的最开头包含了我的更改密码表单的弹出窗口。并在我的PHP文件底部包含其他（.js）文件。
所以，当我在FORM之后插入我的更改密码AJAX的js代码时，我得到了＆＃34; undefined $＆＃34;错误（这意味着我没有包括jquery）。我在底部包含我的.js文件，但它没有检测到我的＆＃34;点击＆＃34;在指定的按钮上。我做错了什么？
change_password.js文件：
$('#change_password_submit').on('click',function() {
alert('OK!');
$('#change_password_form').removeClass("has-error");
$('#change_password_confirm_form').removeClass("has-error");
if($("#change_password").val()=="" || $("#change_password").val()==" ")
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Define a password.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_form').addClass("has-error");
return false;
}
if($("#change_password_confirm").val()=="" || $("#change_password_confirm").val()==" ")
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Confirm your password.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_confirm_form').addClass("has-error");
return false;
}
if($("#change_password_confirm").val() != $("#change_password").val())
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Passwords does not match.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_confirm_form').addClass("has-error");
return false;
}
$.SmartMessageBox({
title : "<i class='fa fa fa-spinner fa-spin txt-color-green'></i> Confirmation!",
content : "Do you want to edit the user?",
buttons : '[No][Yes]'
},
function(ButtonPressed)
{
if (ButtonPressed === "Yes")
{
$.ajax({
type: 'POST',
url: 'user_func.php',
data :
{
'password' : $('#change_password').val(),
'password_confirm' : $('#change_password_confirm').val(),
'ajax_action' : 'change_password'
},
success: function(msg)
{
if (msg == "no_match") {
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Passwords does not match.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
} else {
$.smallBox({
title : "Success",
content : "<i class='fa fa-clock-o'></i> <i>Password changed successfully.</i>",
color : "#659265",
iconSmall : "fa fa-check fa-2x fadeInRight animated",
timeout : 4000
});
}
}
});
}
if (ButtonPressed === "No")
{
$.smallBox({
title : "Cancelled",
content : "<i class='fa fa-clock-o'></i> <i>Change cancelled.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
}
});
});
我在顶部的更改密码：
<div class='col-xs-12 col-sm-12'>
<form action='noaction();' class='form-horizontal'>
<div class='form-group' id='change_password_form'>
<div>
<div class='icon-addon addon-md'>
<input type='password' id='change_password' name='change_password' placeholder='New Password' class='form-control'>
<label class='glyphicon glyphicon-lock' title='Password'></label>
</div>
</div>
</div>
<div class='form-group' id='change_password_confirm_form'>
<div>
<div class='icon-addon addon-md'>
<input type='password' id='change_password_confirm' name='change_password_confirm' placeholder='Confirm Password' class='form-control'>
<label class='glyphicon glyphicon-lock' title='Confirm Password'></label>
</div>
</div>
</div>
</form>
<div class='form-group'>
<button id='change_password_submit' class='btn btn-block btn-primary change_password_submit'>Submit</button>
</div>
</div>
这就是我在页面底部包含我的js文件的方式：
<!--================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>
<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
<!-- BOOTSTRAP JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- CUSTOM NOTIFICATION -->
<script src="js/notification/SmartNotification.min.js"></script>
<!-- JARVIS WIDGETS -->
<script src="js/smartwidgets/jarvis.widget.min.js"></script>
<!-- SPARKLINES -->
<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>
<!-- JQUERY SELECT2 INPUT -->
<script src="js/plugin/select2/select2.min.js"></script>
<!-- JQUERY UI + Bootstrap Slider -->
<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- browser msie issue fix -->
<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>
<!-- FastClick: For mobile devices -->
<script src="js/plugin/fastclick/fastclick.js"></script>
<!-- MAIN APP JS FILE -->
<script src="js/app.js"></script>
<!-- PAGE RELATED PLUGIN(S) -->
<!-- <script src="js/plugin/datatables/jquery.dataTables-cust.min.js"></script>
<script src="js/plugin/datatables/ZeroClipboard.js"></script>
<script src="js/plugin/datatables/media/js/TableTools.min.js"></script>
<script src="js/plugin/datatables/DT_bootstrap.js"></script>
<script src="js/plugin/bootbox/bootbox.min.js"></script> -->
<script type="text/javascript" src="js/change_password.js"></script>
答案 0 :(得分：0)
如果您将脚本包装在$(document).ready(function () {});？