Блог

Главная - Вопросы по программированию - Как использовать jQuery для будущих элементов?

Как использовать jQuery для будущих элементов?

#javascript #jquery #jquery-ui

Вопрос:

Я использую плагины выбора даты пользовательского интерфейса jQuery для класса ввода «.дата-ввод».

 $(document).ready(function(){
    $(".date-input").datepicker({
      dateFormat: "dd-mm-yy",
      maxDate: "0",
      yearRange: "1990:2021",
      changeMonth: true,
      changeYear: true
    })
})

Но элементы будут созданы в будущем с помощью jQuery. Как добиться желаемого результата?

Комментарии:

1. Я думаю, нам нужны еще некоторые подробности.. Что вы подразумеваете под «созданным в будущем»? Будете ли вы кодировать их в будущем, тогда я предлагаю вам сделать это до написания этой функции.. Если вы имеете в виду, что они будут отображаться после загрузки страницы, пожалуйста, сообщите нам, как они будут «созданы в будущем».

2. Для событий вы можете использовать делегированные события. В этом случае вы можете либо добавить свой код после создания элемента, либо, как только вы полностью исчерпаете эту опцию, вы можете использовать MutationObserver

3. «Но элементы будут созданы в будущем» — Добавьте указатель даты ( .datepicker({ ... }) ) при добавлении .date-input элементов. В чем проблема с этим?

4. @freedomn-m Даже в этом случае, скорее всего, будут происходить события, которые запускаются при создании этих элементов или когда они были добавлены в DOM (Имхо, a MutationObserver должно быть последним средством).

Ответ №1:

Если вы сами создаете элементы datepicker, вы можете сделать это: (т. Е. Создайте элемент datepicker, а затем установите на нем параметры.)

 <!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>
Метки: