TypeError: $(...).timepicker 不是函数答案

【问题标题】：TypeError: $(...).timepicker is not a functionTypeError: $(...).timepicker 不是函数
【发布时间】：2015-10-23 12:32:25
【问题描述】：

我遇到了 Jquery timepicker() 的问题；功能这里是

<link href="js/jqueryTimepicker/jquery.timepicker.css" rel="stylesheet" />
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jqueryTimepicker/jquery-ui.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.min.js"></script>

这是 HTML 标记

<div id="tableTime">
        <table>
            <tr>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtMonday" /></td>
                <td>
                    <input type="text" id="txtTuesday" /></td>
                <td>
                    <input type="text" id="txtWednesday" /></td>
                <td>
                    <input type="text" id="txtThursday" /></td>
                <td>
                    <input type="text" id="txtFriday" /></td>
                <td>
                    <input type="text" id="txtSaturday" /></td>
            </tr>
        </table>
    </div>

jQuery 上述所有 jquery 文件都加载得很好，但它会引发一个错误 TypeError: $(...).timepicker is not a function 帮助！！！我不知道在哪里

<script>
        $(document).ready(function () {
            $("#txtMonday").timepicker();
            $("#txtTuesday").timepicker();
            $("#txtWednesday").timepicker();
            $("#txtThursday").timepicker();
            $("#txtFriday").timepicker();
            $("#txtSaturday").timepicker();
        });
    </script>

【问题讨论】：

为什么要包含两次脚本？
另外，哪个 JQuery timepicker 库？ This one?
您不包括缩小版和完整版。
@RespectMyAuthoritah 是的，你提到的那个

标签： javascript jquery html css asp.net

【解决方案1】：

<!DOCTYPE html>
    <html>
    <head>

      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
      <!-- Updated stylesheet url -->
      <link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

      <!-- Updated JavaScript url -->
      <script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
      <script>

      $(function() {
      $("#datepicker").datepicker();
    });

    $(function() {
      $('#timepicker1').timepicker();
    });
    $(function() {
    $("#datepicker1").datepicker();
    });

    $(function() {
    $('#timepicker2').timepicker();
    });
      </script>

    </head>
    <body style="background-color:#E8E9E9;">
      <form method="post" action="makecleaningappt">

        <input type="text" id="datepicker" name="date">
        <br>
        <input type="text" id="timepicker1" name="time">

            <input type="text" id="datepicker1" name="date">
            <br>
            <input type="text" id="timepicker2" name="time">
      </form>

    </body>
    </html>

【讨论】：

【解决方案2】：

您的其中一个导入可能无法正常工作，因为我在 JSFiddle 中让它工作。尝试重新下载 CSS/JS 文件并确保它们位于正确的位置。如果这仍然不起作用，您可以使用 CDN 来引用 CSS/JS 文件。

将以下内容放入您的 HTML 代码中，它应该被修复

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>

另外，在未来，我可能会建议使用 CSS 类而不是单个 id 的 like so：

$(document).ready(function () {
        $('.txt').timepicker();
    });

【讨论】：

你能用你的整个 HTML 代码创建一个 JSFiddle 让我看看吗？某些东西可能会超载。
该链接似乎显示一切按预期工作。什么在那里不起作用？
如果你不能提供它不工作的确切代码，我帮不了你。只是说它不工作，但链接到工作的代码并没有帮助
您的第一个代码 sn-p 中有错误。 CSS 文件位于脚本标签中。

【解决方案3】：

您可能在导入文件时遇到问题。看：JSFiddle

检查我使用的外部资源。

$(document).ready(function () {
        $("#txtMonday").timepicker();
        $("#txtTuesday").timepicker();
        $("#txtWednesday").timepicker();
        $("#txtThursday").timepicker();
        $("#txtFriday").timepicker();
        $("#txtSaturday").timepicker();
    });

【讨论】：

是的，我认为这是问题所在，但我该如何生存
您必须在代码中导入所有 JS/CSS 文件：
您能做的最好的事情就是将所有这些文件放到您的本地主机上。然后你可以像这样导入它们：（示例）