$未定义 - asp.net MVC 4

Question

使用下面的代码,我收到一个错误:$ 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>

怎么解决？

Answer 1

您放置脚本视图身体,而不是里面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的末尾,就在关闭正文标记之前,你不需要$(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>
}