JS脚本由1个元素调用，而不是由其他3个元素调用

JS Script called by 1 element, not called by 3 others

本文关键字：元素 调用 其他 3个 脚本 JS 1个      更新时间：2024-06-25

我有一个JS函数，当日期或时间输入更改时，我想调用它。使用以下元素，将调用函数。我确定这一点的依据是，当我在chrome中运行页面时，打开devtools调试器，我会在函数开头的断点处停止。这些元素是在asp.net网页上定义的。

<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，另一个元素为airPickupdateInput。由于"onchange"值，我希望timepicker元素能够触发函数。

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

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

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

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

元素的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的第一个元素，这就是为什么在您的情况下，第一个元素获得了日期选择器，而不是其他元素

HTML中的ID必须是唯一的

您可以指定一个公共类，然后使用类选择器(".class")。

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

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