$ не определено - asp.net MVC 4

С помощью этого кода ниже я получаю сообщение об ошибке: $ is not defined. Мой вопрос: как это возможно?

...
<script  type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#cb').click(function () {
                if (this.checked) {
                    $('div#div').slideDown();
                } else {
                    $('div#div').slideUp();
                }
            });
        })
    });
</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js")

Как мы видим, он правильно загружает все скрипты:

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

Как его решить?

Ответы

Ответ 1

Вы разместили свой script в теле просмотра, а не в разделе Scripts, где он принадлежит, и после, ссылаясь на jQuery:

@section Scripts {
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js")
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(function () {
            $('#cb').click(function () {
                if (this.checked) {
                    $('div#div').slideDown();
                } else {
                    $('div#div').slideUp();
                }
            });
        });
    </script>
}

Кроме того, чтобы дважды не ссылаться на jQuery (как в вашем случае), проверьте, не включили ли вы его уже как пакет в _Layout.

И последнее замечание: поскольку по умолчанию скрипты включены в конец DOM, перед тегом закрывающего тега, вам не нужно обматывать ваш script в $(document).ready просто потому, что к тому времени он выполняет DOM уже загружен. Ваш код еще хуже, потому что вы его дважды. Имейте в виду, что $(function() { ... }); эквивалентен $(document).ready(function() { ... });, и в вашем случае вы вложили 2 из этих вещей, когда вам действительно не нужны какие-либо из них.

Итак:

@section Scripts {
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js")
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $('#cb').click(function () {
            if (this.checked) {
                $('div#div').slideDown();
            } else {
                $('div#div').slideUp();
            }
        });
    </script>
}

Ответ 2

Вы не включаете jQuery JS до конца страницы, но вы пытаетесь использовать $задолго до того, как вы включили его.

Ответ 3

Вы включаете jquery дважды.

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>

Первый и последний js файлы одинаковы, кроме одного, и мини-код, а другой, вероятно, нет. Удалите неминифицированный, и он должен работать для вас.