29

使用下面的代码，我得到一个错误：$ 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>

如何解决？

4

3 回答 3

62

您已将脚本放置在视图正文中，而不是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 的末尾，就在结束 body 标记之前，您不需要将脚本包装在 a 中，$(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>
}
于 2013-07-18T20:51:37.917 回答
4

直到页面末尾您才包含 jQuery JS，但您尝试在包含它之前充分利用 $ 。

于 2013-07-18T20:44:54.637 回答
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 文件是相同的，只是一个被缩小了，另一个可能不是。删除未缩小的那个，它应该适合你。

于 2013-07-18T20:43:30.363 回答