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

问题是我需要在小部件显示之前在datepicker上单击两次。

执行此操作后，datepicker会在第三次单击时直接显示。

我试图用$（document）.ready（function（）{}包装上面的内容，但是没有用，因为我认为通过innerhtml添加ajax调用的内容不会引发页面重新加载。有些人说使用我所做的委托活动，但你仍然无法工作。

任何人都有这个为什么会发生这种情况的想法？我还尝试使用控制台窗格中的Google Developer工具检查代码：monitorEvents（窗口，＆＃34;点击＆＃34;）和$ ._ data（（$ 0），＆＃39; events＆＃39;）但它是太冗长了，我不知道如何使用这些信息进行调试，比如事件冒泡。

感谢您的帮助！

Answer 1

您的问题是，您在点击#container时添加了datepicker - 这可能是包含所有内容的div：

BmCmD

因此，当您第一次点击您实际在容器上添加datepicker时，您的代码应该看起来像没有任何onclick事件：

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

如果动态完成，你还需要将它包装在元素创建上。

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

1 个答案: