Question

我无法找到任何似乎可以解答为什么我的DatePicker在同一页面上不会运行多次的原因。以下是我使用的代码，为了清晰起见，删除了大部分正文内容并且易于阅读：

<html>
  <head>
    <!-- Load jQuery from Google's CDN -->        
    <!-- Load jQuery UI CSS  -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <!-- Load jQuery JS -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Load jQuery UI Main JS  -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <!-- Load SCRIPT.JS which will create datepicker for input field  -->
    <script src="script.js"></script>

    <link rel="stylesheet" href="runnable.css" />
  </head>
  <body>
    <p>Pick a Date: <input type="text" id="datepicker" /></p>
    <p>Pick a Date: <input type="text" id="datepicker" /></p>
    <p>Date:<input type="text" id="datepicker" /></p>
  </body>

任何人都可以告诉我为什么它只适用于第一个实例但不适用于以下2个？

谢谢！

Answer 1

您有多个id datepicker的实例，这是无效的HTML。 id应该是一个独特的领域。

如果你想申请多个，请把它变成一个类：

<input type="text" class="datepicker" />

然后使用类选择器应用它：

$('.datepicker').datepicker();

这将解决无效的HTML和多个实例问题。

作为一个额外的信息，它仅适用于第一个实例的原因是因为jQuery中的ID选择器在找到第一个（以及应该是唯一的）匹配后停止在DOM中查找元素。

JQuery DatePicker在第一个实例后无法正常工作

1 个答案: