类型错误：$.datepicker 未定义答案

【问题标题】：TypeError: $.datepicker is undefined类型错误：$.datepicker 未定义
【发布时间】：2012-08-12 01:18:09
【问题描述】：

我的 javascript 有代码，用于我网站上的一个页面：

$('#nmdt1').datetimepicker({
        dateFormat: $.datepicker.ATOM,
        minDate: nmsdt,
                  ...
                  ...

当加载 id="nmdt1" 的页面时，这运行良好。我仅在加载该页面时才加载相关的 datetimepicker js 库（模块）。到目前为止一切顺利。

但是当我在我的网站上加载任何其他页面时，我会收到此错误：从定义日期格式的行号开始。

编辑：这是 firebug 日志的正确错误：

TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569

第 569 行是：

dateFormat: $.datepicker.ATOM,

是的，这个错误只出现在我没有加载相关 js 代码 (jquery-ui-timepicker-addon.js) 的页面上。我没有在每一页上加载这个 js 的原因是，我只需要在一个页面上。

更多详情：

在库加载后的 HTML 标头中（按顺序）

<head>
    <script src="/jscript/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="/jscript/myjsscript.js" type="text/javascript"></script>
...
...
    <script type="text/javascript">
    jQuery(document).ready(function(){
        var mid = "[% mid %]";
        alert('mid='+mid);
        $(".bvmainmenu #"+mid).css({"background":"url(/images/current-bg.gif) top left repeat-x", "color":"#ffffff"});
    });
    </script>
</head>

当 jquery-ui-timepicker-addon.js 库未加载时，您在上面看到的最后一个 javascript 代码（标题的底部）不会运行（并且您会在 firebug 中看到错误 - 我可以忍受错误，但为什么最后一个代码没有运行，我不确定）。我无法理解为什么这个例程不能运行只是因为我没有加载一个“附加”库

正确运行所有内容的页面在 BODY 中加载以下 js 脚本

<script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

在此页面上，您在标题中看到的最后一个 javascript 代码也会加载并显示警报！

我很难弄清楚这一点。

【问题讨论】：

您是否在这些页面上包含相关的 jquery 库？

标签： javascript jquery

【解决方案1】：

确保 $ 是您的 jquery 快捷方式标识符。检查使用情况

var $J = jQuery.noConflict();

在这种情况下尝试使用$J.datepicker

【讨论】：

【解决方案2】：

您是否在应用程序中包含jQuery UI。

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>

【讨论】：

现身阿伦。我有一个错字，因此没有正确引用 jqueryUI。
那是我的情况。我更新了 jQuery UI 包，并且（MVC Net）站点非常旧，没有定义任何包，并且 jquery ui 文件引用在布局页面中明确设置了它们的版本号，所以我不得不将文件名更新为一个带有新版本号的

【解决方案3】：

你似乎在说这段代码：

$('#nmdt1').datetimepicker({
    dateFormat: $.datepicker.ATOM,
    minDate: nmsdt,
    ...

...在每个页面上加载的常见myjsscript.js 脚本中。如果是这样，这意味着它会在每个页面上运行，因此在不包含额外插件脚本的页面上会出现错误。

我上面引用的代码不是的意思是“如果存在具有该 id 的元素调用datetimepicker() 方法”，它的意思是“创建一个可能有也可能没有的 jQuery 对象元素，然后调用datetimepicker() 方法，传递一个属性设置为$.datepicker.ATOM 的对象。”也就是说，即使页面上没有 nmdtd1 元素，它仍然会调用datetimepicker 并仍然引用$.datepicker.ATOM。

至少有三种方法可以解决这个问题：

将该代码从常见的myjsscript.js 中移出，然后将其放在需要它的一页上。
继续在您网站的所有页面上包含插件 JS 文件 - 它们将被浏览器缓存，因此假设您的用户访问了您的多个页面，这并不是真正的性能损失。
在条件中移动该代码，以便除非需要，否则不会执行 .datetimerpicker() 部分。

对于选项 3：

var $nmdt1 = $('#nmdt1');
if ($nmdt1.length > 0) {
    $nmdt1.datetimepicker({
       dateFormat: $.datepicker.ATOM,
       minDate: nmsdt,
       ...
    });
}

【讨论】：

谢谢，很多！我喜欢第三种选择。你也正确地理解了情况。我使用它，它修复了错误 - 加载（我猜它加载所有但只执行满足 if 条件的部分）所需的代码。它还解决了在 header 中编写的最后一个 javascript 代码没有运行的问题。所以现在一切都好。最后一个问题：我的 js 文件是 28kB - 大小是多少，我应该考虑将代码分离成加载相关页面的 js 文件吗？有什么标准吗？再次发送！
关于拆分外部JS文件，见仁见智。我的首选是在一个公共文件中只包含公共代码。
谢谢。我想我是否能够从另一个 specific.js 文件（$(document).ready... 中的所有函数）访问一个 common.js 文件中定义的函数（$(document).ready... ）。于是我环顾四周，发现了这个页面：http://www.webdeveloper.com/forum/showthread.php?t=35451这是正确的吗？
如果您的函数被声明为 inside 一个 document.ready 函数，那么它们将被限定为该 document.ready 函数的本地函数，并且无法从 outside访问> document.ready - 甚至来自同一页面上的其他代码。
感激不尽。愿原力与你同在！ :) 万岁！！