ASP.NET JQuery-jQuery.Deferred例外：$不是函数

Question

我对JQuery经验不足，所以也许这是一个愚蠢的错误。但是，这已经困扰了我一段时间了，似乎什么也没用。

我的网站（ASP.NET Webforms）中似乎没有第三方JQuery脚本。 具体来说，我正在尝试制作Owl Carousel work。

这就是我在Head（在MasterPage中）中加载脚本和CSS的方式：

<link href="../Content/style.css" rel="stylesheet" />
<link href="../Content/social.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveClientUrl("~/Content/js/owl.carousel.min.js") %>"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveClientUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveClientUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />


<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>

<link href="../img/icons/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />

我确保先加载Jquery，然后再加载其他任何插件。这是我的HTML（在“内容”页面中）：

<div class="owl-carousel">
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        console.log("in");
        $(".owl-carousel").owlCarousel();
    });
</script>

无论我做什么，都会收到此错误：

我为此搜索了很多东西，但还是没有运气。我尝试了很多插件，但总是以相同的错误结束。

Answer 1

我认为您为owlCarousel指明了错误的路径

您应该重新考虑：

  

ResolveUrl 创建到根的相对URL。

     

ResolveClientUrl 创建当前页面的相对URL。

我认为您应该使用 ResolveUrl 而不是 ResolveClientUrl 来获取正确的路径。

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveUrl("~/Content/js/owl.carousel.min.js") %>"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />

Answer 2

如果遇到相同问题的人遇到此问题：

所以，正如freedom -m所述，问题是JQuery被加载了两次。 ASP.NET示例网站有一个脚本管理器，该脚本管理器在我不知道的情况下引用了JQuery（默认情况下从NuGet加载）。

<asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <%--<asp:ScriptReference Name="jquery" />--%>
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
</asp:ScriptManager>

我刚刚评论了JQuery参考，一切都按预期工作。