JQuery UI“ $(”# datepicker“) . datepicker 不是一个函数”

当我在现有的.aspx 页面中使用 JQuery 的 UI 插件 DatePicker 时，会出现以下错误:

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

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

有没有人能证实我的观点，或者提供一些建议，帮助我们找到干扰 jQuery UI 插件的罪魁祸首？

393666 次浏览
小开

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

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

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

小开

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

参考魔术 查询

如果你不喜欢输入完整的 “ jQuery”一直都有，有一些 替代捷径:

将 jQuery 重新分配到另一个快捷方式 var $j = jQuery;(这可能是 最好的方法，如果你希望使用 不同的图书馆) 技术，它允许您使用 $ 内部的代码块没有 永久性覆盖 $:

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

注意: 如果您使用 技术，你将不能使用 此封装内的原型方法 期望 $为 原型是 $，所以你要做一个 选择只使用 jQuery 使用 DOM 的参数 备战项目:

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

注: 再说一次，在那个街区里你不能用 原型方法

这是文件的结尾，可能对你有用

小开

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

在数据收集器调用之前很可能存在一个错误，阻止数据收集器调用执行。

小开

当您在 jQueryUI 集中缺少一个文件时，通常会出现此错误。

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

小开

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

尝试使用 firebug 的网络选项卡查找是否已加载，或 Web 开发工具栏的 Information View javascript 代码。

小开

我只是遇到了这个问题，在 </body>标记为我修复它之前，我将 JS 引用和代码移动到了页面的底部。

小开

还要检查将文件下载到的目录的权限。由于某种原因，当我下载这个，默认情况下，它被保存在一个文件夹，不允许访问！我花了很长时间才发现这个问题，但是我只需要修改目录和内容的权限——将它设置为 EveryYONE = READ ONLY。现在很好用。

小开
最佳答案

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

小开

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

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

小开

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

当时，我并没有意识到这只是一个脑子放屁，我没有正确地关闭它开始。(我发布这篇文章只是为了防止其他人碰到类似的问题。)

小开

有些文件在您调用之前没有加载。

例如: 你的代码:

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

换成这个:

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

我知道这个职位是相当老，但作为参考，我修复了这个问题的 更新数据采集器的版本

为了避免数小时的调试，这也是值得尝试的。

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

小开

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" />
小开

我可以修复这个问题，删除 _ 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)
小开

你有没有试过用 $(“ # <% = txtDateElementId. ClientID% >”) . datepicker () ; 而不是 $(“ # txtDateElementId”) . datepicker () ; 当使用 JQuery 按 ID 选择元素时。

小开

在我的例子中，通过改变以下脚本的导入顺序解决了这个问题: 工作前(非工作时) :

工作后:

小开

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

使用 NuGet

确保你通过 NuGet 安装了以下软件:

  • JQuery
  • ScriptManager.jQuery
  • JQuery UI 组合
  • 组合

从这里安装它们[ Tools > NuGet Package Manager > Manage NuGet Packages for Solution ]

然后，jquery 和 jquery.ui 组合应该添加到 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>

这也解决了我的问题。 谢谢你。

小开

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

几天前我也遇到了这个问题。之所以会出现这种情况，可能是因为 jquery 链接在文件中出现了不止一次。尝试在整个文件中搜索重复的内容。

它看起来有点像这样:

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

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

小开

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

小开

对于那些使用 Laravel的用户，默认的 app.js在其声明中有一个 defer。
删除 IT < br >
enter image description here

小开

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

小开

您的代码需要包含 JQuery UI，将其粘贴到 jQuery 脚本之后:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

如果你想要更高的安全性，那么你可以在你的电脑上下载1.13版本，因为1.12有一些漏洞，而且 Google 还没有最新的版本。

小开

对我来说，错误的发生是因为无效的日期格式:

无效代码:

<script>
$('#targetDate').datepicker({
format : 'dd/MM/yyyy'
});
</script>

有效代码:

<script>
$('#targetDate').datepicker({
format : 'dd/mm/yyyy'
});
</script>

请注意 MM。请检查您的日期格式是否正确。 希望能有帮助！


提交答案