Javascript未按正确的顺序加载

Javascript not loaded correcly order?

本文关键字：顺序加载 Javascript 更新时间：2023-09-26

我有一个网页，我在标题中加载了一些javascript文件。一些子页面将加载其他JavaScript文件。在主页上，一切都很好，但在子页面上，我收到了很多这样的异常：

未捕获的类型错误：对象 [对象对象] 的属性"$"不是功能

我可以看到这个异常在 HTML 页面本身中详细发生.js、voteHandler.js 和 4 次。异常总是在此行上引发：

$("document").ready(function () {

这是工作的主页的样子：

<head>
        <script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
        <script type="text/javascript">
            //URL for voting
            var _postVoteUrl = 'http://localhost:5215/Post/Vote'
            //URL for tags
            var _tagsUrl = 'http://localhost:5215/Post/Tags'
            //Keep track of if a cascading is loading, if so, cancel submits
            var cascadingControlLoading = false;
            window.latestClick = '';
            function IsNotDblClick(objectID) {
                if (window.latestClick != objectID &&
                    !cascadingControlLoading) {
                    window.latestClick = objectID;
                    return true;
                } else {
                    return false;
                }
            }
            $(document).ready(function () {
                if($('#rightCon').text().trim().length < 1)
                {$('#rightCon').hide();}
            });
        </script>
        <script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
        <script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
        <script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
        <script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
        <script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>  
        <script type="text/javascript" src=/Scripts/formhandler.js></script>
        <script type="text/javascript" src=/Scripts/taghandler.js></script>
        <script src="/Scripts/voteHandler.js"></script>
        <script type="text/javascript" src=/Scripts/select2.min.js %>"></script>
    <script>
        function TogglePostCon() {
            $('#postListEditorCon').toggle();
        }

        SetupTagTextBox("txtTagBox", false);
        SetupTagTextBoxPersonalTag("txtPersonalTagBox", true);
        SetupTagTextBoxPersonalTag("txtPersonalIgnoreTagBox", true);
    </script>
        <script src="/Scripts/modernizr-2.5.3.js"></script>
    </head>

这是抛出异常的子页面：

    <head>
            <script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
            <script type="text/javascript">
                //URL for voting
                var _postVoteUrl = 'http://localhost:5215/Post/Vote'
                //URL for tags
                var _tagsUrl = 'http://localhost:5215/Post/Tags'
                //Keep track of if a cascading is loading, if so, cancel submits
                var cascadingControlLoading = false;
                window.latestClick = '';
                function IsNotDblClick(objectID) {
                    if (window.latestClick != objectID &&
                        !cascadingControlLoading) {
                        window.latestClick = objectID;
                        return true;
                    } else {
                        return false;
                    }
                }
                $(document).ready(function () {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });
            </script>
            <script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
            <script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
            <script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
            <script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
            <script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>  
            <script type="text/javascript" src=/Scripts/formhandler.js></script>
            <script type="text/javascript" src=/Scripts/taghandler.js></script>
            <script src="/Scripts/details.js"></script>
            <script src="/Scripts/voteHandler.js"></script>
       <script>
$(function () {
                //Google +1
                $.getScript("http://apis.google.com/js/plusone.js", null, true);
                //Twitter
                $.getScript("http://platform.twitter.com/widgets.js", null, true);
                //Facebook
                $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
                    $('body').append('<div id="fb-root"></div>');
                    FB.init({ status: true, cookie: true, xfbml: true });
                }, true);
            });
    </script>
        <script src="/Scripts/modernizr-2.5.3.js"></script>
    </head>

我

之前在正文底部加载了一些脚本，这并没有产生异常，但从我读到的内容来看，这不是推荐的方法。

那么为什么我的子页面会生成这些异常呢？

在"no-confict"模式下，$ 快捷方式不可用，并且使用较长的 jQuery，即

jQuery(document).ready(function ($) {

通过在函数调用后的括号中包含 $，您可以在代码块中使用此快捷方式。

替换您的代码

$(document).ready(function () {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });

有了这个

jQuery(document).ready(function ($) {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });