Question

我的javascript文件的加载顺序似乎有些问题。在我的_Layout.cshtml中，我引用了JQuery，然后创建了我的脚本部分。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
@RenderSection("Script", false)

在我的主视图文件中，我引用了myScript.js文件

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="~/Scripts/myScripts.js"></script>

@section Script {
    <script>

        var options = {
            lineGraphData: @Html.Raw(Model.LineGraphJson),
        }

        var viewModel = init(options);
        ko.applyBindings(viewModel);

    </script>
}

在myScripts.js中，我有以下点击事件

$('.update-linegraph').on('click', function () {
    UpdateLineGraph();
});

但是，当页面加载时，我收到以下错误：

Uncaught ReferenceError: $ is not defined

我的理解非常有限，但是，我认为在加载单个视图之前它已经加载了jQuery库。任何帮助将不胜感激。

Answer 1

由于您引用了＆＃34; myScript.js＆＃34;不在脚本部分，他们将在页面中呈现与您的视图内联的任何位置。如果它们位于视图的顶部，则它们将在您调用RenderBody（）的点处在Layout中呈现。如果您在Layout的底部加载脚本，那么jQuery和所有其他脚本将不会在myScripts.js文件加载的时间点加载，因此＆＃39; $＆＃39;将是未定义的。

尝试在脚本部分中移动myScripts.js参考。

@section Script {
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="~/Scripts/myScripts.js"></script>
    <script>

        var options = {
            lineGraphData: @Html.Raw(Model.LineGraphJson),
        }

        var viewModel = init(options);
        ko.applyBindings(viewModel);

    </script>
}

Answer 2

每当我看到错误

Uncaught ReferenceError: $ is not defined

它是因为我试图在我没有正确引用jQuery库的地方使用jQuery。

我最近没有经常使用过jQuery，所以我这样思考是不正确的，但我相信错误告诉你，你还没有在myScripts.js文件中引用jQuery库。

我个人会尝试将你的jQuery引用添加到你的myScript.js文件中，就像这样

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    $('.update-linegraph').on('click', function () {
        UpdateLineGraph();
    });
</script>

Answer 3

我有一个类似的问题，我的_Layout.cshtml中的所有脚本最后都被加载，这导致$ Jquery not defined错误。所以，我要做的是：

只需在<script>...</scripts>的{{1}}标记内移动<head></head>
之后，它真的很好

MVC渲染部分在布局中的脚本之前加载

3 个答案: