时间戳

首页 > 解决方案 > 无法在动态创建的输入类型文本上显示日期选择器

jquery - 无法在动态创建的输入类型文本上显示日期选择器

问题描述

我有一个动态创建的表单，它有一个用于显示日期选择器的输入类型文本。当我单击输入时，日期选择器不显示。

    $('.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()
        })
    })

标签： jqueryformsinputdatepicker

解决方案

尽管我真的很想彻底检查您的操作方式，但要使其正常工作，您可以在下面尝试。

首先，将 ID 更改为一个类，因为您不能有重复的 ID（出于同样的原因，我会更改其他输入 ID）。

然后，由于您要追加，请抓住 LASTdatepicker字段并使用它来应用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();

推荐阅读