ASP.NET Core MVC: $(document).ready is not working

Question

I have a Razor view like this which is the layout of the website

<link href="~/Contents/Material/css/memenu.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="~/Contents/Material/js/memenu.js"></script>
<script>
    $(document).ready(function () {
        $(".memenu").memenu();
    });
</script>
<script src="~/Contents/Material/js/simpleCart.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

This is where memenu.js is located: "~/Contents/Material/js/memenu.js".

It looks like the URL is correct. However, the $(document).ready() doesn't seem to be working.

Here is the definition of memenu:

$(document).ready(function () {
    $.fn.memenu = function (e) {
        function r() {
            $(".memenu").find("li, a").unbind();
            if (window.innerWidth <= 768) {
                o();
                s();
                if (n == 0) {
                    $(".memenu > li:not(.showhide)").hide(0)
                }
            } else {
                u();
                i()
            }
        }

        function i() {
            $(".memenu li").bind("mouseover", function () {
                $(this).children(".dropdown, .mepanel").stop().fadeIn(t.interval)
            }).bind("mouseleave", function () {
                $(this).children(".dropdown, .mepanel").stop().fadeOut(t.interval)
            })
        }

        function s() {
            $(".memenu > li > a").bind("click", function (e) {
                if ($(this).siblings(".dropdown, .mepanel").css("display") == "none") {
                    $(this).siblings(".dropdown, .mepanel").slideDown(t.interval);
                    $(this).siblings(".dropdown").find("ul").slideDown(t.interval);
                    n = 1
                } else {
                    $(this).siblings(".dropdown, .mepanel").slideUp(t.interval)
                }
            })
        }

        function o() {
            $(".memenu > li.showhide").show(0);
            $(".memenu > li.showhide").bind("click", function () {
                if ($(".memenu > li").is(":hidden")) {
                    $(".memenu > li").slideDown(300)
                } else {
                    $(".memenu > li:not(.showhide)").slideUp(300);
                    $(".memenu > li.showhide").show(0)
                }
            })
        }

        function u() {
            $(".memenu > li").show(0);
            $(".memenu > li.showhide").hide(0)
        }

        var t = { interval: 250 };
        var n = 0;
        $(".memenu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon1'></span><span class='icon2'></span></li>");
        r();
        $(window).resize(function () {
            r()
        })
    }
});

This is the path to my script:

When I run application, the website does not display the menu. Does anyone know why this would happen?

Answer 1

Declare your scripts at the bottom of the layout. You mentioned that they are declared at the top...this will cause problems if the document is still loading whilst the scripts are executed.

Move the following to the bottom of the layout (just before the </body> tag):

    <script type="text/javascript" src="~/Contents/Material/js/memenu.js"></script>
    <script>
        $(document).ready(function () {
            $(".memenu").memenu();
        });
    </script>
    <script src="~/Contents/Material/js/simpleCart.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

Also make sure you have them in the correct order.