Uncaught TypeError: undefined is not a function while using jQuery UI答案

【问题标题】：Uncaught TypeError: undefined is not a function while using jQuery UIUncaught TypeError: undefined is not a function while using jQuery UI
【发布时间】：2014-04-23 00:50:15
【问题描述】：

我之前没用过jQuery，我想在我的网页上使用DateTimePicker插件。

我下载了插件文件并将它们放在与 HTML 文件相同的目录中。

我直接在http://xdsoft.net/jqplugins/datetimepicker/中应用了How to use it?的代码。

它抛出了以下错误。

Uncaught TypeError: undefined is not a function pixelcrawler:61（匿名函数）

我的代码如下。

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
    jQuery('#datetimepicker').datetimepicker();
</script>

<div class="container">
  <div class="text-center">
    <div class="page-header">
      <h1>${conf['title']} <small>${conf['description']}</small></h1>
    </div>
  </div>
  <div class="text">
      <input id="datetimepicker" type="text" >
                                        .
                                        .
                                        .
                                        .
                                        .

我无法弄清楚问题出在哪里。我尝试了许多其他看似可能的选择，但也没有奏效。

（${} 标签用于Mako 模板语言。我使用的是Cherrypy。）

更新：

我找到了问题的根源。

来自jQuery('#datetimepicker').datetimepicker();。

测试时，datetimepicker() 函数未定义。可能是我导入库的方式不对？

【问题讨论】：

Jquery not working in external JS的可能重复
这怎么和那个重复？
查看此答案并尝试一下。我很确定这是你的问题。所以我的评论说“可能”我并不是说这是完全重复的。

标签： javascript jquery

【解决方案1】：

jQuery(document).ready(function(){
    jQuery('#datetimepicker').datepicker();
})

我不知道你的文件结构。我从不包含这样的本地文件，因为我从一开始就使用相对 URL，而不是每次我准备好使用代码时都必须更改，但很可能其中一个文件没有被加载。我已经包含了标准下面的日期选择器使用 Google CDN 的 jQuery UI。您的控制台是否记录任何未找到的资源？

我认为你的 jQuery 加载正常，因为它没有告诉你 jQuery 没有定义，所以它是你的文件之一。

顺便说一句，PHP 获取主页 URL：

$home="http://" . $_SERVER['HTTP_HOST'].'/';

演示代码日期选择器，jQuery UI：

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

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#datetimepicker').datepicker();
    })
</script>

<input id="datetimepicker" type="text">

【讨论】：

确保转义 $_SERVER['HTTP_HOST']。如果无法从 Vhost 配置中提取，则 Host: HTTP 标头可能会未经过滤地传递给脚本，从而导致一些漏洞。

【解决方案2】：

这是关于 HTML 解析机制的。

HTML 解析器将从上到下解析 HTML 内容。在您的脚本逻辑中，

jQuery('#datetimepicker')

将返回一个空实例，因为该元素尚未加载。

你可以使用

$(function(){ your code here });

或

$(document).ready(function(){ your code here });

先解析HTML元素，再做自己的脚本逻辑。

【讨论】：

【解决方案3】：

使用 jQuery.noConflict()

var j = jQuery.noConflict();
j(document).ready(function(){
    j('#datetimepicker').datepicker();
})

【讨论】：

【解决方案4】：

对于我的情况，这是一个命名冲突问题。添加 $J 即可解决。

//Old code:
function () {
    var extractionDialog;

    extractionDialog = $j("#extractWindowDialog").dialog({
        autoOpen: false,
        appendTo: "form",
        height: "100",
        width: "250",
        modal: true
    });

    $("extractBomInfoBtn").button().on("click", function () {
        extractionDialog.dialog("open");
    }

以下是新代码。

 $j(function () {
    var extractionDialog;

    extractionDialog = $j("#extractWindowDialog").dialog({
        autoOpen: false,
        appendTo: "form",
        height: "100",
        width: "250",
        modal: true
    });

    $j("extractBomInfoBtn").button().on("click", function () {
        extractionDialog.dialog("open");
    });
});

希望它可以帮助某人。

【讨论】：

【解决方案5】：

通常当您遇到此问题时，这是因为脚本试图在页面加载时引用一个尚不存在的元素。

正如 Richie 所说：“HTML 解析器会从上到下解析 HTML 内容……”

因此，您可以将 JavaScript 引用添加到 HTML 文件的底部。这不仅会提高性能；它还将确保您的脚本文件中引用的所有元素都已被 HTML 解析器加载。

所以你可以有这样的东西：

<html>
    <head>
        <!--  Style sheet references and CSS definitions -->
    </head>
    <body>
        <!-- HTML markup and other page content -->

        <!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
    </body>
</html>

【讨论】：

【解决方案6】：

您可能会看到您是否没有以某种方式加载 jQuery 两次。尤其是在你的插件 JavaScript 文件加载之后。

我遇到了同样的错误，发现我的一个外部 PHP 文件再次加载了 jQuery。

【讨论】：

【解决方案7】：

由于没有加载 jquery ui 库导致的问题。

https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN 源文件

在您的文件中调用上述路径。

【讨论】：

您能否就如何按照您所说的做一些更深入的了解？

【解决方案8】：

如果您在幻灯片或幻灯片中遇到此问题，则必须使用jquery.easing.1.3：

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

【讨论】：

【解决方案9】：

我无法选择使用ASP.NET。事实证明我并没有正确地包含所有内容，但是这位先生让它万无一失：Three steps to use jQuery UI in ASP.NET MVC 5。

【讨论】：

【解决方案10】：

我不认为 jQuery 本身包含 datetimepicker。您必须改用jQuery UI (src="jquery.ui")。

【讨论】：

jQuery UI 将其小部件实现为 jQuery 插件；贴出的成语jQuery(selector).datetimepicker()是正确的。