jQuery datepicker only loads for first item added by JavaScript

Question

I'm trying to load a jQuery datepicker for input fields which are added using append();

The datepicker is loading fine for the first input field, but for any additional ones added it does not load, see JSFiddle for an example here: 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();

});

Possible duplicate of [putting datepicker() on dynamically created elements - JQuery/JQueryUI](https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui) — Obsidian Age, Aug 03 '17 at 04:00

score 1 · Answer 1 · answered Aug 03 '17 at 04:02

You just need to update JavaScript 100% working:

Need to removeClass('hasDatepicker') before adding..

See here:

$(".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();

    });

score 0 · Answer 2 · answered Aug 03 '17 at 04:27

$(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 only loads for first item added by JavaScript

2 Answers2