jQuery將click事件委托給datetimepicker，需要單擊兩次

Question

我具有通過歷史api通過Ajax調用動態添加到索引頁面的內容（我使用pushstate和onpopstate）。

對於將要加載的特定頁面，我有一個帶有日期字段的表單，如下所示：

<tr>
  <td class='input-group date' id='datetimepicker1'>
    <input style='width: 250px; border: 0; outline: none; name='invoicedate' value='2017-10-01' data-date-format='YYYY-MM-DD'>
    <span class='input-group-addon'>
      <span class='glyphicon glyphicon-calendar'></span>
    </span>
  </td>
</tr>

從索引頁面開始，我要將click事件附加到datetimepicker1，以便顯示Bootstrap datetimepicker小部件。 我使用以下代碼段：

$("#container").on("click", "#datetimepicker1", function(){
  $("#datetimepicker1").datetimepicker({
    locale: 'nl',
    format: 'YYYY-MM-DD',
    allowInputToggle: true,
    useCurrent: false,
  }); 
}); 

問題是在小部件顯示之前，我需要在日期選擇器上單擊兩次。

這樣做之后，第三次單擊時，日期選擇器將直接顯示。

我試圖用$（document）.ready（function（）{}包裝以上內容，但這沒有用，因為我認為通過innerhtml通過ajax調用添加的內容不會觸發頁面重新加載。委托事件，您可以看到，但仍然無法正常工作。

任何人對此都有想法嗎？ 我還嘗試使用控制台窗格中的Google Developer工具檢查代碼：monitorEvents（window，“ click”）和$ ._ data（（$ 0），'events'），但它太冗長，我不知道如何使用這些信息進行調試，例如事件冒泡。

感謝您的幫助！

Answer 1

您的問題是您在單擊#container時添加了日期選擇器-可能是包裝所有內容的div：

$("#container").on("click", "#datetimepicker1", function(){
  $("#datetimepicker1").datetimepicker({
    locale: 'nl',
    format: 'YYYY-MM-DD',
    allowInputToggle: true,
    useCurrent: false,
  }); 
}); 

因此，第一次單擊時，實際上是在容器上添加日期選擇器，因此代碼應如下所示，沒有任何onclick事件：

$("#datetimepicker1 input[name='invoicedate']").datetimepicker({
    locale: 'nl',
    format: 'YYYY-MM-DD',
    allowInputToggle: true,
    useCurrent: false,
}); 

如果這是動態完成的，則還需要在元素創建過程中完成。