javascript - jQuery datepicker 仅在第一次执行时运行
问题描述
我的页面以这种方式加载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
and 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("script");window.loadedjQuery.src="/js/lib/jquery-2.1.4.min.js";window.loadedjQuery.onload = loadJQueryUI;document.head.appendChild(window.loadedjQuery);}function loadJQueryUI() {window.loadedJQueryUI = document.createElement("script");window.loadedJQueryUI.src="/js/lib/jquery-ui.js";window.loadedJQueryUI.onload = loadAddEditJob;document.head.appendChild(window.loadedJQueryUI);var link = document.createElement("link");link.rel = "stylesheet";link.href = "/css/jquery-ui.css";document.head.appendChild(link);}function loadAddEditJob() {window.loadedAddEditJob = document.createElement("script");window.loadedAddEditJob.src="/js/templates/AddEditJob.js";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
hasDatePicker
class
document.onreadystatechange = function() {
//$("#start-date, #end-date").datepicker({dateFormat: "yy-mm-dd"});
};
并打开弹出窗口,然后其中的项目被正确初始化为日期选择器并且它们运行良好。如果我关闭弹出窗口并重新打开它,即使里面的所有内容都被破坏并重新创建,我的项目将作为日期选择器正常工作。
我的问题是:如何确保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>';
}
所有四个输入都应该作为日期选择器工作,但第三和第四个不像日期选择器那样工作。
解决方案
正如我在上面的代码和 JSFeddle 中看到的那样。document.body.innerHTML += '<iframe style="display: none;" onload="console.log(window.test);window.test();"></iframe>';
}
您通过代码更新 DOM 。
您需要将 datepicker 事件重新分配给这些输入字段。
或者只是在 dom 更新后添加以下代码。
$('.ui-datepicker').remove();
$("#start-date, #end-date").removeClass('hasDatepicker').datepicker();
这是更新的 JSFeddle 链接。http://jsfiddle.net/g1zk8mc7/53/ 谢谢
推荐阅读
- git - 在 Git OverWrite master 分支与另一个分支之后,master 分支的所有历史记录都被删除了吗?
- abap - 查找支付 VIM 发票的付款日期和用户
- sql-server - 可以缓存多少数据以获得更好的性能
- c++ - pegtl - 如何跳过整个语法的空格
- java - 在多个步骤定义类之间传递场景上下文
- java - Spring Boot 中的所有资源都需要这个可能的 set defual 角色吗?
- android - 超过 26 岁的 Android 文件提供程序问题
- angular - 在扩展面板中突出显示扩展面板的单选按钮
- c# - 带有身份服务器 4 的 URL 令牌
- angular - (ngModelChange) 不会更新特定输入的 UI