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

Question

我以前没有使用过jQuery,我想DateTimePicker在我的网页上使用插件.

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

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

它引发了以下错误.

未捕获的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,而不是每次我准备好使用代码时都要更改,但很可能其中一个文件没有加载.我已经包含了标准使用谷歌CDN的jQuery UI下面的datepicker .您的控制台是否记录未找到的任何资源？

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

顺便说一句,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");
    });
});

希望它可以帮助某人.