jquery – $没有定义 – asp.net MVC 4

使用下面的代码，我得到一个错误：$没有定义。我的问题是：怎么可能？

...
<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>

如何解决？

解决方法

您将脚本放置在视图正文中，而不是在脚本部分中，即它所属的脚本，并且在引用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的结尾，就在关闭正文标签之前，您不需要将脚本包装在$(文档)中，只是因为在执行时DOM已经被加载了。你的代码更糟，因为你有两次。请记住$(function(){…});相当于$(document).ready(function(){…});在你的情况下，当你实际上不需要任何这些东西时，你已经嵌套了这些东西。

所以：

@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>
}