如何将 jQuery 用于未来的元素?
Posted
技术标签:
【中文标题】如何将 jQuery 用于未来的元素?【英文标题】:How to use jQuery for future elements? 【发布时间】:2021-10-14 02:23:12 【问题描述】:我正在为输入类“.date-input”使用 jQuery UI 日期选择器插件。
$(document).ready(function()
$(".date-input").datepicker(
dateFormat: "dd-mm-yy",
maxDate: "0",
yearRange: "1990:2021",
changeMonth: true,
changeYear: true
)
)
但是这些元素将来会由 jQuery 创建。如何达到想要的结果?
【问题讨论】:
我认为我们需要更多细节。“未来创造”是什么意思。你以后会编码吗,那么我建议你在写这个函数之前先写。如果你的意思是它们会在页面加载后呈现,请告诉我们它们将如何“在未来创建”。跨度> 对于事件,可以使用委托事件。在这种情况下,您可以在创建元素之后添加代码,或者在完全用尽该选项后,可以使用MutationObserver “但这些元素将在未来创建” - 添加.date-input
元素时添加日期选择器 (.datepicker( ... )
)。问题出在哪里?
@freedomn-m 即使这样,当这些元素被创建或被添加到 DOM 时,很可能会触发事件(恕我直言,MutationObserver
应该是最后的手段)
【参考方案1】:
如果您自己制作日期选择器元素,您可以这样做:(即制作日期选择器并然后在其上设置选项。)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="contents"></div>
<script>
// make the date picker
$('#contents').append('<p>Date: <input type="text" id="datepicker"></p>');
// set the datepicker options
$('#datepicker').datepicker(
dateFormat: "dd-mm-yy",
maxDate: "0",
yearRange: "1990:2021",
changeMonth: true,
changeYear: true
);
</script>
</body>
</html>
【讨论】:
以上是关于如何将 jQuery 用于未来的元素?的主要内容,如果未能解决你的问题,请参考以下文章
jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件