jQuery 日期选择器仅在第一次执行时运行

Question

我的页面以这种方式加载daily.js：

<script type="text/javascript" src="/js/lib/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/lib/jquery-ui.js"></script>
<link rel="stylesheet" href="/css/jquery-ui.css">
<script type="text/javascript">
    window.loadedJQuery = true;
    window.loadedJQueryUI = true;
</script>
<script type="text/javascript" src="/js/pages/admin/daily.js"></script>

这就是 daily.js 包含的内容（大大简化的版本）：

document.onreadystatechange = function() {
    $("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
};

这正确地从 start-date 和 end-date 中生成了 datepicker，看起来像这样：

<label>
    Munkálatok időintervalluma: <input id="start-date" type="text"> - <input id="end-date" type="text">
</label>

到目前为止一切顺利。但是在某些情况下，会出现一个弹出窗口 window。为了确保正确执行与之相关的Javascript，我添加了一个不可见的iframe，如下所示：

<iframe style="display: none;" onload="function loadJQuery() {window.loadedjQuery = document.createElement(&quot;script&quot;);window.loadedjQuery.src=&quot;/js/lib/jquery-2.1.4.min.js&quot;;window.loadedjQuery.onload = loadJQueryUI;document.head.appendChild(window.loadedjQuery);}function loadJQueryUI() {window.loadedJQueryUI = document.createElement(&quot;script&quot;);window.loadedJQueryUI.src=&quot;/js/lib/jquery-ui.js&quot;;window.loadedJQueryUI.onload = loadAddEditJob;document.head.appendChild(window.loadedJQueryUI);var link = document.createElement(&quot;link&quot;);link.rel = &quot;stylesheet&quot;;link.href = &quot;/css/jquery-ui.css&quot;;document.head.appendChild(link);}function loadAddEditJob() {window.loadedAddEditJob = document.createElement(&quot;script&quot;);window.loadedAddEditJob.src=&quot;/js/templates/AddEditJob.js&quot;;document.head.appendChild(window.loadedAddEditJob);}if (!window.loadedjQuery) {loadJQuery();} else if (!window.loadedJQueryUI) {loadJQueryUI();} else if (!loadedAddEditJob) {loadAddEditJob();}" "=""></iframe>

在我的弹出窗口 window 内，它不在 iframe 内我有这个：

<input class="form-data" name="StartedDate" type="text" id="started-date" value="2018-07-29">

还有这个：

<input class="form-data" name="EndedDate" type="text" id="ended-date" value="2018-07-29">

和AddEditJob.js被加载，看起来像这样（大大简化的版本）：

$(function() {
    var d = new Date();
    $("#started-date, #ended-date").each(function() {
        if ((this.id === "started-date") && (!$(this).val())) {
            $(this).val(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
        }
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
});

我的问题是 started-date 和 ended-date 不会像人们期望的 datepicker 那样工作，也就是说，当我在它们内部单击时，没有任何反应。没有错误消息，什么都没有，尽管 hasDatePicker class 已正确添加到它们中，正如人们所期望的那样。如果我避免将我的第一个日期选择器初始化为

这样的日期选择器

document.onreadystatechange = function() {
    //$("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
};

并打开弹出窗口 window，然后其中的项目被正确初始化为日期选择器并且它们工作正常。如果我关闭弹出窗口 window 并重新打开它，即使里面的所有内容都被销毁并重新创建，我的项目将作为日期选择器正常工作。

我的问题是：如何确保加载时执行的 datepicker 和显示弹出窗口时执行的 window 都能正确初始化我所有的日期选择器？

编辑：

在深入尝试解决问题后，我没有成功，所以我创建了这个 Fiddle。

HTML:

<label>
    Munkálatok időintervalluma: <input id="start-date" type="text"> - <input id="end-date" type="text">
</label>
<input class="form-data" name="StartedDate" type="text" id="started-date" value="2018-07-29">
<input class="form-data" name="EndedDate" type="text" id="ended-date" value="2018-07-29">
<button onclick="window.createIFrame();">
    Create Iframe
</button>

JS:

    $("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
window.test = function() {
    var d = new Date();
    $("#started-date, #ended-date").each(function() {
        if ((this.id === "started-date") && (!$(this).val())) {
            $(this).val(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
        }
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
};
window.createIFrame = function() {
    document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>';
}

所有四个输入都应该作为日期选择器工作，但第三个和第四个输入不像日期选择器那样工作。

Answer 1

正如我在上面的代码和 JSFeddle 中看到的那样。您通过 document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>'; } 代码更新 DOM。

您需要将日期选择器事件重新分配给那些输入字段。

或在 dom 更新后添加以下代码。

$('.ui-datepicker').remove();
$("#start-date, #end-date").removeClass('hasDatepicker').datepicker();

这是更新的 JSFeddle link。 http://jsfiddle.net/g1zk8mc7/53/ 谢谢

jQuery 日期选择器仅在第一次执行时运行

jQuery datepicker runs only at first execution

javascript

jquery

datepicker

jquery-ui-datepicker