如何将 jQuery 用于未来的元素？答案

【问题标题】：How to use jQuery for future elements?如何将 jQuery 用于未来的元素？
【发布时间】：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 应该是最后的手段）

标签： javascript jquery jquery-ui

【解决方案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>

【讨论】：