Question

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

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

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

它引发了以下错误。

未捕获的TypeError：undefined不是一个函数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()函数未定义。也许我导入库的方式错了？

Answer 1

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

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

我认为你的jQuery加载好了，因为它没有告诉你jQuery没有被定义所以它是你的一个文件。

BTW，PHP获取主页URL：

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

演示代码datepicker，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">

Answer 2

这是关于HTML解析机制。

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

jQuery('#datetimepicker')

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

您可以使用

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

或

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

首先解析HTML元素，然后执行自己的脚本逻辑。

Answer 3

使用jQuery.noConflict（）

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

Answer 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");
    });
});

希望它可以帮助别人。

Answer 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>

Answer 6

你可能会看到你是不是以某种方式加载jQuery两次。特别是在你的插件JavaScript文件加载后。

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

Answer 7

因为没有加载jquery ui库而导致的问题。

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

调用文件中的上述路径。

Answer 8

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

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

Answer 9

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

Answer 10

我不认为jQuery本身包含datetimepicker。您必须改为使用jQuery UI（src =“jquery.ui”）。

未捕获的TypeError：undefined在使用jQuery UI时不是一个函数

10 个答案: