onClick 需要 2 次點擊

Question

我正在使用這個JQuery 時間選擇器。

        <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選擇來采用更動態的方法來做到這一點 - 如果使用id來初始化timePicker ，那么您將多次重復相同的代碼。

您還將有check out時間輸入。 所以是的，使用一個class將適用於所有輸入。

此外，盡可能avoid內聯事件 - 不建議使用 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>