[英]jQuery delegated click event to datetimepicker need to click twice
I have content that is dynamically added into the index page via ajax calls with the history api (I use pushstate and onpopstate). 我具有通过历史api通过Ajax调用动态添加到索引页面的内容(我使用pushstate和onpopstate)。
For a specific page that will be loaded I have a form with a date field like this: 对于将要加载的特定页面,我有一个带有日期字段的表单,如下所示:
<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>
from the index page I want to attach a click event to datetimepicker1 so that the Bootstrap datetimepicker widget will show. 从索引页面开始,我要将click事件附加到datetimepicker1,以便显示Bootstrap datetimepicker小部件。 I use this snippet:
我使用以下代码段:
$("#container").on("click", "#datetimepicker1", function(){
$("#datetimepicker1").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
});
The problem is that I need to click twice on the datepicker before the widget shows up. 问题是在小部件显示之前,我需要在日期选择器上单击两次。
After doing that the datepicker shows up directly when clicked for the third time. 这样做之后,第三次单击时,日期选择器将直接显示。
I have tried to wrap the above with $(document).ready(function () { } but that didnt work, because I think the added content with ajax calls via innerhtml doesn't fire a page reload. Also some people said to use delegated events which I do as you can see and it still doesn't work. 我试图用$(document).ready(function(){}包装以上内容,但这没有用,因为我认为通过innerhtml通过ajax调用添加的内容不会触发页面重新加载。委托事件,您可以看到,但仍然无法正常工作。
Anyone got thoughts on this why this happens? 任何人对此都有想法吗? I also tried to inspect the code with Google Developer tools from the console pane: monitorEvents(window, "click") and $._data(($0), 'events') but it is too verbose and I don't know how to use the information for debugging like event bubbling.
我还尝试使用控制台窗格中的Google Developer工具检查代码:monitorEvents(window,“ click”)和$ ._ data(($ 0),'events'),但它太冗长,我不知道如何使用这些信息进行调试,例如事件冒泡。
Thanks for helping! 感谢您的帮助!
Your problem is that you're adding datepicker on click on #container - that's probably some div that wraps everything: 您的问题是您在单击#container时添加了日期选择器-可能是包装所有内容的div:
$("#container").on("click", "#datetimepicker1", function(){
$("#datetimepicker1").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
});
So first time you click you're actually adding datepicker on your container, your code should look like this without any onclick event: 因此,第一次单击时,实际上是在容器上添加日期选择器,因此代码应如下所示,没有任何onclick事件:
$("#datetimepicker1 input[name='invoicedate']").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
You also need to wrap this up on element creation if this is done dynamically. 如果这是动态完成的,则还需要在元素创建过程中完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.