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

我有一个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'）。日期选择器({
日期格式：“年月日”，
onSelect：功能（已选择，evnt）{
GetTZ（选中，$（'#airPickuptimeInput'）.val（）；
}
});
});

当我从名为airPickupdateInput的datepicker元素中选择一个日期时，将按预期调用该函数。但是，当我更改输入文本框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>

$（函数（）{
$（“#gndPickupdateInput”）.datepicker({
日期格式：“年月日”，
onSelect：功能（已选择，evnt）{
GetTZ（选中，$（'#gndPickupdateInput'）.val（）；
});
});

在这种情况下，日期输入和时间输入都不会在更改时调用函数。此外，datepicker小部件没有激活。我看到的唯一区别是第二组输入元素保存在一个表中。有什么原因会产生差异吗

澄清

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

简言之，我有3个问题：

为什么该函数没有被任何一个timepicker元素调用

为什么在第一种datepicker情况下调用函数，而在第二种情况下不调用

为什么在第二种情况下datepicker小部件没有激活

---

一个元素的ID必须是唯一的，因此如果要将多个元素与选择器组合在一起，请使用另一个属性，如类

在您的例子中，我认为所有datepicker输入都具有类

datepicker

，因此使用该类选择所有datepicker输入元素

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

然后

---

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

HTML中的id必须是唯一的。

您可以指定一个公共类，然后使用它

由于您已经添加了一个通用类（时间选择器），请使用它。我建议您使用：

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

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