jquery - $ 未定义 - 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

您已将脚本放在 View 正文中，而不是放在它所属的 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 两次(如您的情况)，请仔细检查您是否尚未将其作为 bundle 包含在 _Layout 中。

最后一点:由于默认情况下脚本包含在 DOM 的末尾，就在结束 body 标记之前，因此您不需要将脚本包装在 $(document).ready 只是因为当它执行时，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>
}