jQuery datepicker僅在首次執行時運行

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

這正確地使datepicker超出了start-date和end-date ，如下所示：

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

到現在為止還挺好。 但是在發生某些事件時，會出現一個彈出窗口。 為了確保相應地正確執行與其相關的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>

在我的彈出窗口中（不在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正常工作，也就是說，當我單擊datepicker時，什么也沒發生。 沒有錯誤消息，什么也沒有，盡管hasDatePicker class正確地添加到了它們，正如人們所期望的那樣。 如果我避免將第一個日期選擇器初始化為像

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

並打開彈出窗口，然后將其中的項目正確初始化為日期選擇器，它們可以正常工作。 如果我關閉彈出窗口並重新打開它，即使里面的所有東西都被破壞並重新創建，我的項目也可以作為日期選擇器正常工作。

我的問題是：如何確保要在加載時執行的datepicker和在顯示的彈出窗口中執行的datepicker都能正確初始化我的所有datepicker？

編輯：

在深入嘗試解決問題之后，我沒有做到這一點，因此我創建了這個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>'; } document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>'; } document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>'; }代碼。

您需要將datepicker事件重新分配給那些輸入字段。

或在dom更新后直接添加以下代碼。

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

這是更新的JSFeddle鏈接。 http://jsfiddle.net/g1zk8mc7/53/謝謝