Javascript 无法运行包含的js文件

我正在运行一个项目，需要允许用户更改自己的密码。但是我在php文件的最开始就包含了更改密码表单的弹出窗口。并在PHP文件的底部包含其他.js文件

因此，当我在表单后面插入更改密码AJAX的js代码时，我得到了未定义的$error，这意味着我没有包含jquery。我在底部包含了我的.js文件，但它没有检测到我点击指定按钮的行为。我做错了什么

更改\u 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>

---

如果将脚本包装在$document.readyfunction{}

所以你没有收到“OK”警报？你确定你包含了jQuery吗？是的，是的，我包含了…你在更改密码之前包含了jQuery？我刚刚看到document.write，感觉有点不对劲dizzy@EceKuru你确定你试过这个吗？我很肯定这会解决你的问题是的。你告诉我之前我就这么做了，现在我又试了一次。它就是不起作用当我在jQuery之前包含JS文件时，它就出现了。。。所以别介意。我解决了。现在唯一的问题是，如果加载了我的.js文件，但没有得到click@EceKuru正如我告诉您的，documentready将等到所有dom元素都在dom树中，然后再尝试附加一个处理程序（在本例中为click处理程序）。现在正在将处理程序附加到一个不存在的元素。