onClick 需要 2 次点击

Question

        <fieldset class="input-field">
          <svg>
            <use xlink:href="images/icons.svg#clock"></use>
          </svg>

          <input
            type="text"
            name="empCheckinTime"
            id="empCheckinTime"
            onclick="pickTime('#empCheckinTime')"  // This event works only on the second click
            required
          />

          <label for="empCheckinTime">Check-in Time</label>
        </fieldset>

        <script>
          function pickTime(element) {
            $(element).timepicker({ timeFormat: "H:i:s" })
          }
       </script>

我以前遇到过这个问题。那时，我使用 setTimeout 将函数调用延迟 50 毫秒。这次没用。

Answer 1

您可以改为这样做：

$(document).ready(function() {
   $("#empCheckinTime").timepicker({ timeFormat: "H:i:s" });
});

Answer 2

您可以通过在输入上使用 class 选择来采用更动态的方法来做到这一点 - 如果对 timePicker 使用 id 进行初始化，那么您将 多次重复相同的代码。

您还将有 check out 时间输入。所以是的，使用 class 将适用于所有输入。

此外，avoid 尽可能使用内联事件 - 不要 rec-emended 使用 onClick 等内联事件。在这种情况下，您甚至不需要内联 onclick 函数。

$(document).ready(function() {
   $(".timePicker").timepicker({ timeFormat: "H:i:s" });
});

现场工作演示：

$(document).ready(function() {
  $(".timePicker").timepicker({
    timeFormat: "H:i:s"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker@1.13.14/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.13.14/jquery.timepicker.css">

<fieldset class="input-field">
  <svg>
    <use xlink:href="images/icons.svg#clock"></use>
  </svg>

  <input type="text" class="timePicker" name="empCheckinTime" id="empCheckinTime" />
  <label for="empCheckinTime">Check-in Time</label>
  <input type="text" class="timePicker" name="empCheckoutTime" id="empCheckoutTime" />
  <label for="empCheckoutTime">Check-Out Time</label>
</fieldset>

onClick 需要 2 次点击

onClick requires 2 clicks

html

javascript

css

jquery

timepicker