$("#datepicker").datepicker 不是函数 - JavaScript 错误答案

【问题标题】：$("#datepicker").datepicker is not a function - JavaScript error$("#datepicker").datepicker 不是函数 - JavaScript 错误
【发布时间】：2012-03-17 03:14:54
【问题描述】：

我正在尝试将 fullcalendar 和 datepicker 链接在一起，为自己形成一个不错的日历，但我的代码遇到了以下错误：

错误信息：

$("#datepicker").datepicker 不是函数

这是我的代码：

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<link href="../scripts/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../Styles/dark-hive/jquery.ui.all.css">
<script src="../jquery/jquery-1.7.1.js"></script>
    <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../scripts/ui/jquery.ui.datepicker.js"></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>

 <script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>

另外，有没有办法摆脱顶部的一些 JQuery 脚本调用？太多了，看起来很乱，但是我是JQuery的新手。

【问题讨论】：

stackoverflow.com/questions/1212696/… 的可能重复项
你不应该在你的 fullcalendar 插件之前加载 jquery 吗？
我想我现在已经这样做了（上面的代码反映了我的更改），但是错误仍然存在。感谢您的回复！

标签： javascript jquery css datepicker fullcalendar

【解决方案1】：

在页面加载 jquery-1.7.1.js、jquery.ui.core.js 和 jquery.ui.datepicker.js 之前，您正在加载 fullcalendar.min.js。把它放在它们下面，否则它不能扩展它们的功能。

您还可以通过将 jQuery 函数放在一个 <script> 标记而不是两个标记中来减少代码：

<script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>

【讨论】：

感谢您的回答！我现在已经更新了上面的代码，但同样的问题仍然存在！
正在尝试清除缓存。使用 Firebug 或 Chrome 的 Inspect Element 工具找出您的 JavaScript 出错的地方。如果它说像$("#datepicker").datepicker is not a function 这样的东西，通常意味着你的内联 JavaScript 函数没有连接到你的外部 jQuery 库

【解决方案2】：

您可以像这样整合您的 jQuery：

$(document).ready(function() {
  // fullCalendar             
  $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
        left: '', 
        center: '', 
        right: '' 
    }, 
    defaultView: 'agendaDay', 
    editable: false, 
    events: "../fullcalendar/JSONcreator" 
  });

  // jQuery UI datepicker
  $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dateText, inst) {
      var d = new Date(dateText);
      $('#calendar').fullCalendar('gotoDate', d);
    }
  }); 
});

您应该只有一个$(document).ready(function() {}); 声明。将其保存在底部的<script> 标签内。这与为load 调用事件侦听器相同：window.addEventListener('load', function(){}, false);

另外，请确保在声明脚本之前加载脚本。

【讨论】：