Question

我正在尝试为使用append（）添加的输入字段加载jQuery datepicker;

对于第一个输入字段，datepicker正在加载正常，但是对于添加它的任何其他字段都没有加载，请参阅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();

    });

Answer 2

$(document).ready(function() { 
	$('#btnadddate').click(function(){
    $('#content').append('<br>a datepicker <input class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});
		
	});

<button id="btnadddate">add a datepicker</button>
<div id="content">
   Add Date <input class="datepicker_recurring_start" name="seasonal-date-from"/>
</div>

jQuery datepicker仅加载JavaScript

2 个答案: