javascript - ASP.NET JQuery - jQuery.Deferred 异常 : $ is not a function

Question

我对 JQuery 没有那么丰富的经验，所以也许这是一个愚蠢的错误。然而，这已经困扰我一段时间了，而且似乎没有任何效果。

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

这就是我在 Head 中加载脚本和 CSS 的方式(在 MasterPage 中):

<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 creates the relative URL to the root.

ResolveClientUrl creates the relative URL to the current page.

我认为您应该使用 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" />