jQuery TypeError: $ is undefined

StackOverflow https://stackoverflow.com/questions/23475405

Question

I'm trying to use the iCheck plugin and I'm new to JQuery and javaScript. I'm getting an error in the browser that says

TypeError: $ is undefined

I looked around and found this link, but I tried adding (jQuery) as it suggests, but it didn't change the error message.

The symptom on the web page that I see is that the web page doesn't have hover working or black inside the checkbox, like the example for polaris skin shows.

Any ideas? See the " c-style comment - //" below to know the exact line that the TypeError is pointing to.

Here is an excerpt from my code:

<html>
    <head>
        <title>jQuery Michele Project</title>
        <link href="css/skins/polaris/polaris.css" rel="stylesheet">
        <link href="css/skins/all.css" rel="stylesheet">
        <link href="css/demo/css/custom.css" rel="stylesheet">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/icheck.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                $("#infolist").accordion({
                   autoHeight: false
                });
       });

        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.input').iCheck({

                    checkboxClass:'icheckbox_polaris', //this is the line that the error message points to
                    radioClass:'iradio_polaris',
                    increaseArea:'-10%'
                });
            })(jQuery);
        </script>
        <style type="text/css">
            ul {list-style-type: none}
            img {padding-right: 20px; float:left}

            #infolist {width:500px}
        </style>
    </head>
    <body>
Was it helpful?

Solution

You are loading <script src="js/icheck.js"></script> before jQuery is defined. Load jQuery first.

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
<script src="js/icheck.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top