Не удается отобразить указатель даты для текста типа ввода, созданного динамически

Question

У меня есть форма, созданная динамически, и она имеет один тип ввода текста для отображения выбора даты. Когда я нажимаю на вход, средство выбора даты не отображается.

    $('.btn-add-subject').on('click', function () {

        $('.add-edit-delete-subject-ctnr').append('<div class="add-subject-ctnr">');
        $(".add-subject-ctnr").append('<form id="add-datas-schedule">');

        $(".add-subject-ctnr form").append(` <label>Date du cours<label/>`);
        $(".add-subject-ctnr form").append(`<input type="text" id="datepicker" />`);
        // $(".add-subject-ctnr form").append(` <label>Jour<label/>`);
        // $(".add-subject-ctnr form").append(`<input type = "text" value = "" id = "add-line" placeholder = "Jours (0 à 4)">`);
        $(".add-subject-ctnr form").append(` <label>Matière<label/>`);
        $(".add-subject-ctnr form").append(`<input type="text" value="" id="add-class" placeholder="matière">`);
        $(".add-subject-ctnr form").append(` <label>Horaires<label/>`);
        $(".add-subject-ctnr form").append(`<input type = "text" value = "" id = "add-time" placeholder = 'heures "ex: 9.00-10.30"'>`);
        $(".add-subject-ctnr form").append(` <label>Salle<label/>`);
        $(".add-subject-ctnr form").append(`<input type = "text" value = "" id = "add-room" placeholder = "salle">`);
        $(".add-subject-ctnr form").append(` <label>Classe<label/>`);
        $(".add-subject-ctnr form").append(`<input type = "text" value = "${nameClass}" id = "add-class-name" placeholder = "classe" disabled>`);
        $(".add-subject-ctnr form").append(` <label>Professeur<label/>`);
        $(".add-subject-ctnr form").append(`<input type = "text" value = "" id = "add-former" placeholder = "professeur">`);
        $(".add-subject-ctnr form").append(` <label>Couleur<label/>`);
        $(".add-subject-ctnr form").append(`<input type = "text" value = "" id = "add-color" placeholder = "couleur (en englais)">`);
        $(".add-subject-ctnr form").append(`<input type="submit" class="confirm-update-cours-btn btn" value="Ajouter le cours">`);
        $(".add-subject-ctnr form").append(`<input type = "button" class="cancel-add-value btn" value = "Annuler">`);


        $('body').on('focus', "#datepicker", function () {
            $(this).datepicker();
        });

        $('.cancel-add-value').on('click', function () {
            $('.add-subject-ctnr').remove()
        })
    })

Answer 1

Есть несколько проблем:

• Ваши обработчики являются вложенными, каждый раз, когда вы добавляете тему, она добавляет новую.
• То, как вы сопоставляете элементы, возвращает коллекцию, поэтому при добавлении она добавляет к всем элементам в коллекции.

И id s должен быть уникальным, в этом случае вы можете обойтись без него, но вместо этого я бы использовал class.

Примечание: я добавил bootstrap-datepicker, это может быть не та библиотека, которую вы используете но не должен иметь большое значение.

$('.btn-add-subject').on('click', function() {
  // Create a new subject
  let $new_subject = $('<div class="add-subject-ctnr">');
  // Append to this new element
  $new_subject.append('<form id="add-datas-schedule">');
  // Same thing, search the new form inside the element and append to it
  $form = $("form", $new_subject);
  $form.append('<label>Date du cours<label/>');
  $form.append('<input type="text" class="datepicker" />');
  // Rest of controls removed for brevity

  // Add to the container
  $('.add-edit-delete-subject-ctnr').append($new_subject);
});

// Move handlers outside other handlers
$('body').on('focus', ".datepicker", function() {
  $(this).datepicker();
});

$('.cancel-add-value').on('click', function() {
  $('.add-subject-ctnr').remove()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<a class="btn-add-subject">Add subject</a>
<div class="add-edit-delete-subject-ctnr">

</div>

Answer 2

Хотя мне бы очень хотелось пересмотреть, как вы это делаете, чтобы заставить его работать, вы можете попробовать ниже.

Во-первых, измените ID на класс, так как вы не можете иметь повторяющиеся ID ( Я изменил бы другие входные идентификаторы по той же причине).

Затем, так как вы добавляете, захватите поле LAST datepicker и используйте его для применения datepicker.

изменение:

$(".add-subject-ctnr form").append(`<input type="text" id="datepicker" />`);

до:

$(".add-subject-ctnr form").append(`<input type="text" class="datepicker" />`);

и изменение:

 $('body').on('focus', "#datepicker", function () {
     $(this).datepicker();
 });

до

$(".datepicker").last().datepicker();