jQuery 委托点击事件给datetimepicker需要点击两次

Question

我有内容通过 ajax 调用历史 api 动态添加到索引页面（我使用 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>

我想在索引页面中将点击事件附加到 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 开发人员工具检查代码：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,
});

如果这是动态完成的，您还需要在创建元素时将其包装起来。

jQuery 委托点击事件给datetimepicker需要点击两次

jQuery delegated click event to datetimepicker need to click twice

javascript

jquery

datetimepicker

event-bubbling