jQuery UI " $("#datepicker").datepicker 不是一个函数"答案

【问题标题】：jQuery UI " $("#datepicker").datepicker is not a function"jQuery UI " $("#datepicker").datepicker 不是一个函数"
【发布时间】：2010-11-15 19:25:57
【问题描述】：

当我在现有的 .aspx 页面中使用 jQuery 的 UI 插件 DatePicker 时，我收到以下错误：

$("#datepicker").datepicker is not a function

但是，当我将创建和使用 datePicker 的相同代码复制并粘贴到与 aspx 页面位于同一目录中的 HTML 文件中时，它可以完美运行。这让我假设 aspx 页面中有一些 JS 文件阻止 datePicker 或 jQuery 的 UI JS 文件正确加载。

谁能证实我的看法或提供任何提示来找出干扰 jQuery 的 UI 插件的罪魁祸首？

【问题讨论】：

能否贴出相关的jQuery代码
您如何在页面上包含 datepicker 插件 - 它是在 ScriptManagerProxy 中还是您直接将其写入页面？你确定它正在加载吗？如果是这样，您还包括哪些其他插件？你确定你已经包含了 ui.core.js 吗？
我发现了问题。我希望我昨天找到了这个解决方案，而不是在发布这个问题后 1 小时。我编写的 JS 代码引用了 jQuery 和 jQuery UI javascript 文件作为模块。它的父级还在 body 标记的底部引用了 jQuery（所以 2 次引用了 jQuery）。由于 jQuery 在 jQuery UI 之后重新初始化，jQuery UI 作为插件被清除了，因此我的代码找不到 DatePicker 插件。
由于我使用的是 Webpack，所以我需要使用 jquery-ui-bundle 来代替。 stackoverflow.com/a/39230057/470749

标签： asp.net javascript jquery datepicker

【解决方案1】：

我为类似的问题苦苦挣扎了好几个小时。后来发现，jQuery 被包含了两次，一次是我添加 jQuery 函数的程序，一次是我们内部的调试器。

【讨论】：

这也是我的问题。我参考了我自己的 jQuery 库以及 jQuery Tools CDN，它在不知不觉中包含了 jQuery。
这也是我的问题。我正在使用 superfish，它也在加载 jquery。直到现在我才注意到。
那么解决办法是什么？
@HenriqueOrdine 仔细检查页面上是否包含两次 jQuery。
这也是我的问题。我在 rails 资产管道中使用公共资产，并且在我的顶级元文件 (application.js) 中声明 jquery 并且在我的 JS 文件夹中有一个 jquery min 文件。双重声明。我刚刚删除了 jquery 声明。

【解决方案2】：

如果有另一个库正在使用 $ 变量，您可以这样做：

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

还要确保您的 javascript 包含的顺序正确，以便在 jquery.ui 之前定义 jquery 核心库。我遇到过这个问题。

【讨论】：

还要确保您的 javascript 包含的顺序正确，以便在 jquery.ui 之前定义 jquery 核心库。我遇到了这个问题
这也是我的问题。我更改了订单，它起作用了

【解决方案3】：

jQuery“$(”#datepicker“).datepicker 不是函数”

我已通过将以下三个文件放在最后的表单正文部分来解决此问题。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

【讨论】：

你是一个救生员，在所有的答案中，经过 2 天的不间断斗争，正是这个救了我。

【解决方案4】：

当您缺少 jQuery UI 集中的文件时，通常会出现此错误。

仔细检查您是否拥有所有文件、jQuery UI 文件以及 CSS 和图像，以及它们是否位于服务器上正确链接的文件/目录位置。

【讨论】：

这个答案最接近我发布的解决方案。
自我注意：确保在从本地文件切换到谷歌的 CDN 文件时，您实际上拥有正确的 url。它是 ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js，而不是 ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js，该死。

【解决方案5】：

如果您认为存在冲突，您可以在代码中使用jQuery.noConflict()。详情在docs。

引用魔法 - 快捷方式查询

如果您不喜欢输入完整的 “jQuery”一直存在，有一些替代快捷方式：

将 jQuery 重新分配给另一个快捷方式 var $j = jQuery;（这可能是如果你想使用最好的方法不同的库）使用以下技术，它允许您使用 $ 在没有的代码块内永久覆盖$：

(function($) { /* some code that uses $ */ })(jQuery)

注意：如果你使用这个技术，您将无法使用这个封装内的原型方法期望 $ 的函数原型的 $，所以你正在制作一个选择只使用 jQuery 堵塞。使用 DOM 的参数就绪事件：

jQuery(function($) { /*some code that uses $ */ });

注意：同样，在那个块内你不能使用原型方法

这是文档末尾的内容，可能对您有用

【讨论】：

【解决方案6】：

首先要明确：您是否很好地引用了 jquery-ui.js 文件？

尝试使用firebug的network选项卡查看是否已加载，或者Web Developer Toolbar的Information\View javascript代码。

【讨论】：

【解决方案7】：

您是否尝试过使用 Firebug 来 1) 确定没有 Javascript 错误和 2) #datepicker 元素存在于页面上？

很可能在 datepicker 调用之前有一个错误导致 datepicker 调用无法执行。

【讨论】：

【解决方案8】：

我知道这篇文章已经很老了，但作为参考，我通过更新 datepicker 的版本

解决了这个问题

也值得一试以避免数小时的调试。

https://cdnjs.com/libraries/bootstrap-datepicker

【讨论】：

这不适用于 Jquery UI 日期选择器。 Bootstrap 日期选择器是一种完全不同的动物。

【解决方案9】：

我刚遇到这个问题，将 JS 引用和代码移到页面底部，然后 </body> 标记为我修复它。

【讨论】：

【解决方案10】：

还要检查您将文件下载到的目录的权限。由于某种原因，当我下载它时，默认情况下它保存在一个不允许访问的文件夹中！花了很长时间才弄清楚这是问题所在，但我只需要更改目录及其内容的权限 - 将其设置为 EVERYONE = READ ONLY。现在效果很好。

【讨论】：

【解决方案11】：

我最近遇到了这个问题——问题是我在 head 标签中包含了 jQuery UI 文件，但是我使用的 Telerik 库在 body 标签的底部包含了 jQuery（因此显然重新初始化了 jQuery 和卸载之前加载的 UI 插件）。

解决方案是找出实际包含 jQuery 的位置，然后包含 jQuery UI 脚本。

【讨论】：

【解决方案12】：

对我来说，只需要从我的脚本声明中删除“defer”属性

【讨论】：

【解决方案13】：

我刚刚遇到了类似的问题。当我将脚本引用从自闭合标签（即<script src=".." />）更改为空节点（即<script src=".."></script>）时，我的错误消失了，我可以突然引用jQuery UI 函数。

当时，我没有意识到这只是我一开始就没有正确关闭它的大脑放屁。（我发布这个只是因为其他人遇到类似问题的机会。）

【讨论】：

【解决方案14】：

调用前没有加载某些文件。

例如：你的代码：

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

改成这样：

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>

【讨论】：

这将是一个特定的红宝石解决方案。不一定对原始问题具有决定性。

【解决方案15】：

我可以解决这个问题，删除 _Layout.cshtml 上的 jquery 包

标题

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

页脚

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

将页脚更改为

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

【讨论】：

【解决方案16】：

您是否尝试过使用 $("#").datepicker(); 代替 $("#txtDateElementId").datepicker(); 使用 JQuery 按 ID 选择元素时。

【讨论】：

【解决方案17】：

旧问题 - .NET (4.5.6) 的较新版本 - 相同问题 - 新答案

使用 NuGet

确保您已通过 NuGet 安装以下内容：

jQuery
AspNet.ScriptManager.jQuery
jQuery.UI.Combined
AspNet.ScriptManager.jQuery.UI.Combined

从这里安装它们 [工具 > NuGet 包管理器 > 管理解决方案的 NuGet 包]

然后，应将 jquery 和 jquery.ui.combined 添加到 Site.Master 中的 ScriptManager。看起来像这样：

    <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="jquery.ui.combined" />
            <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>

这解决了我同样的问题。谢谢。

【讨论】：

【解决方案18】：

(”#datepicker“).datepicker 不是函数

几天前我也遇到了这个问题。这可能是因为在文件中多次包含 jquery 链接。尝试在整个文件中搜索该重复内容。

看起来有点像这样：

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>

在<head></head> 标记中保留一个并删除所有其余部分。这将解决问题。

【讨论】：

【解决方案19】：

对于使用 Laravel 的用户，默认的 app.js 在其声明中包含 defer。
删除它

【讨论】：

【解决方案20】：

在我的例子中，它是通过更改以下脚本的导入顺序来解决的：之前（不工作）：

之后（工作）：

【讨论】：