包含 .js 文件阻止 jQuery 加载

Question

I am new to jquery/web design and download a template to try and familiarize myself. I am having an issue with a certain script that is preventing my jQuery from loading. I have this in the header on my site:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>
<script type="text/javascript" src="layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="layout/scripts/custom.js"></script>

The culprit file is the <script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script> ; everytime I disable this line jQuery works fine. I am really not sure what to identify in the file that would cause jQuery to not load. The contents of js:

jQuery.noConflict()(function ($) {
    // Create the dropdown base
    $("<form id='mobilemenu'><select /></form>").appendTo("#topnav");
    // Create default option "Go to..." 
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Click For Menu"
    }).appendTo("#topnav select");
    //Populate dropdown with menu items
    $("#topnav a").each(function () {
        var el = $(this);
        var prefix = '';
        switch (el.parents().length) {
            case (6):
                prefix = '';
                break;
            case (8):
                prefix = '- - - ';
                break;
            case (10):
                prefix = '- - - - - ';
                break;
            case (12):
                prefix = '- - - - - - - ';
                break;
            default:
                prefix = '';
                break;
        }
        $("<option />", {
            "value": el.attr("href"),
            "text": prefix + el.text()
        }).appendTo("#topnav select");
        $("#topnav select").change(function () {
            window.location = $(this).find("option:selected").val();
        });
    });
});

Would anyone be able to point me in the right direction with correcting this file? I have tried to move the order that my scripts load and it doesn't matter the order, jQuery doesn't load when the mobilemenu script is included.

Answer 1

Within the script you mention as causing the problem you will see a call to noConflict() this method allows jQuery to be used with other libraries that also rely on the $ as an entry point by removing $ as an alias to jQuery.

Immediately following the noConflict() call you see a very specific function signature that is being passed to jQuery:

(function ($) {
  //function code here
});

jQuery is going to call this function and when it does it will pass itself in as the $ parameter and within the scope of that function you now access jQuery using $ again.

So with the script the way it is you will need to use jQuery by name.

Have a look at the documentation on noConflict for more details.

There are also several other questions on SO with regards to noConflict , this one might help in particular.