javascript - JS 脚本由 1 个元素调用，未由其他 3 个元素调用

Question

我有一个 JS 函数，我想在日期或时间输入更改时调用该函数。 通过以下元素，可以调用该函数。我确定这一点的基础是，当我在 chrome 中运行页面并打开 devtools 调试器时，我会在函数开头的断点处停止。这些元素在 ASP.NET Web 表单页面上定义。

<script type="text/javascript">
$(function () {
  $('#airPickupdateInput').datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function (selected, evnt) {
      GetTZ(selected, $('#airPickuptimeInput').val());
    }
  });
});
</script>
<input id="airPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
<input type="text" id="airPickuptimeInput" class="timepicker" placeholder="Pickup Time" runat="server" onchange="GetTZ($('airPickupdateInput').val(), this.val())" />

当我从名为airPickupdateInput 的日期选择器元素中选择日期时，该函数将按预期调用。但是，当我更改输入文本框中airPickupTimeInput 中的值时，不会调用该函数。

此外，在同一表单的单独区域中，我还有另一对日期/时间输入，定义如下:

 <tbody>
    <tr>
      <td>
      <script type="text/javascript">
        $(function () {
          $("#gndPickupdateInput").datepicker({
            dateFormat: "yy-mm-dd",
            onSelect: function (selected, evnt) {
              GetTZ(selected, $('#gndPickupdateInput').val());
          });
        });
      </script>
      <input id="gndPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
    </td>
    <td>
      <input id="gndPickupTimeInput" class="timepicker" type="text" placeholder="Pickup Time" runat="server" onchange="GetTZ($('gndPickupdateInput').val(), this.val())" />
    </td>
  </tr>
</tbody>

在这种情况下，日期输入和时间输入都不会在更改时调用函数。此外，日期选择器小部件未激活。我能看到的唯一区别是第二组输入元素保存在表中。有什么理由应该有所作为吗？

澄清

我将日期选择器附加到两个不同的元素，一个具有 id =gndPickupdateInput，另一个具有 id=airPickupdateInput。由于“onchange”值，我希望时间选择器元素能够触发该函数。

简而言之，我有 3 个问题:

1. 为什么两个时间选择器元素都没有调用该函数？

2. 为什么在第一个日期选择器情况下调用该函数，而不是在第二个情况下调用该函数？

3. 为什么在第二种情况下日期选择器小部件没有激活？

Answer 1

元素的 ID 必须是唯一的，因此，如果您想使用选择器将多个元素分组在一起，请使用另一个属性(例如类)。

在您的情况下，我认为所有日期选择器输入都具有类datepicker，因此使用该类来选择所有日期选择器输入元素。

$(function () {
  $('.datepicker').datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function (selected, evnt) {
      GetTZ(selected, $('#airPickuptimeInput').val());
    }
  });
});

然后

<input class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />

当您使用 id 选择器时，它仅获取具有给定 id 的第一个元素，这就是为什么在您的情况下第一个元素获得了日期选择器，而不是其余元素。