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,
}); 

如果这是动态完成的，则还需要在元素创建过程中完成。