javascript - jQuery datepicker 仅加载由 JavaScript 添加的第一个项目

Question

我正在尝试为使用append()添加的输入字段加载一个jQuery日期选择器；

第一个输入字段的日期选择器加载正常，但对于添加的任何其他输入字段，它不会加载，请参阅此处的 JSFiddle 示例:https://jsfiddle.net/exsupjy2/1/

HTML:

<button class="add-seasonal-filter button-primary" type="button">Add Date</button>
<div class="seasonal-filter-wrapper-outer"></div>

<div class="seasonal-filter-wrapper" style="display:none;">
    <input type="text" name="seasonal-date-from" class="datepicker" />
</div>

JS:

$(document).ready(function() { 

        "use strict";

        function load_datepicker() {
            $(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
            $(".datepicker").attr("readonly", true);
        }

        function add_seasonal_filter() {
            $(".add-seasonal-filter").on( "click", function() {
                $(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
                load_datepicker();
            });
        }

        add_seasonal_filter();

});

Answer 1

您只需更新 JavaScript 100% 工作:

添加之前需要removeClass('hasDatepicker')..

看这里:

$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});

JavaScript:

$(document).ready(function() { 

        "use strict";

        function load_datepicker() {
            $(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
            $(".datepicker").attr("readonly", true);
        }

        function add_seasonal_filter() {
            $(".add-seasonal-filter").on( "click", function() {
                $(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
                load_datepicker();
            });
        }

        add_seasonal_filter();

    });