asp.net - jQuery UI " $("#datepicker").datepicker 不是一个函数"

Question

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

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

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

任何人都可以确认我的信念或提供任何提示来找到干扰 jQuery 的 UI 插件的罪魁祸首吗？

score 222 · Accepted Answer

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

score 47 · Accepted Answer

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

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

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

score 26 · Accepted Answer

26

于 2017-01-03T01:36:12.563 回答

score 25 · Accepted Answer

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

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

score 9 · Accepted Answer

如果您认为存在冲突，您可以jQuery.noConflict()在代码中使用。详细信息在文档中。

引用魔法 - JQUERY 的快捷方式

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

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

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

注意：如果您使用这种技术，您将无法在这个封装函数中使用 Prototype 方法，这些方法期望 $ 是 Prototype 的 $，因此您选择在该块中仅使用 jQuery。使用 DOM 就绪事件的参数：

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

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

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

score 8 · Accepted Answer

首先是显而易见的：您是否很好地引用了 jquery-ui.js 文件？

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

score 3 · Accepted Answer

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

很可能在 datepicker 调用之前有一个错误阻止 datepicker 调用执行。

score 3 · Accepted Answer

我知道这篇文章很旧，但作为参考，我通过更新 datepicker 的版本解决了这个问题

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

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

score 2 · Accepted Answer

</body>我刚遇到这个问题，在标签为我修复之前将 JS 引用和代码移到页面底部。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

解决方案是找出 jQuery 实际包含在哪里，然后包括 jQuery UI 脚本。

score 1 · Accepted Answer

1

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

于 2021-09-06T02:32:09.640 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

在你打电话之前，有些文件没有加载。

例如：您的代码：

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

改成这样：

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

score 0 · Accepted Answer

0

对于那些使用Laravel的人，默认在其声明中app.js有一个。删除它defer

于 2021-11-26T16:17:23.123 回答

score 0 · Accepted Answer

0

两次引用 jQuery 可能会导致该问题。

于 2022-02-08T07:04:14.677 回答

score 0 · Accepted Answer

老问题 - .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>

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

score 0 · Accepted Answer

我可以解决这个问题，删除 _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)

score 0 · Accepted Answer

您是否尝试过使用 $("#<%= txtDateElementId.ClientID %>").datepicker(); 而不是 $("#txtDateElementId").datepicker(); 使用 JQuery 按 ID 选择元素时。

score 0 · Accepted Answer

("#datepicker").datepicker 不是函数

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

它看起来有点像这样：

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

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

score -1 · Accepted Answer

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

之后（工作）：

asp.net - jQuery UI " $("#datepicker").datepicker 不是一个函数"

21 回答 21

Related

Reference