jquery datepicker multiple inputs

Question

I have an issue which related to multiple jquery process and datepicker.

I am trying to create input dynamically so I wrote the code:

<script type="text/javascript">

function season_func(){
    var series_season = $("input[name='series_season']").val();
    var i;
    $('.forms').html('');
    if(series_season>30){
        series_season = 30;
    }
    for(i=0;i<series_season;i++){
        var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'seasonId' + series_season);
        newTextBoxDiv.after().html('<label>Sezon #'+ (i+1) + ' Başlangıç Tarihi : </label>' +
          '<input type="text" class="form-control datepicker" name="textbox' + (i+1) + 
          '" id="textbox' + (i+1) + '" value="" >');
        newTextBoxDiv.appendTo(".forms");
    }
}
</script>

This create input when I call the season_func and It works properly.

However when I add the datepicker It doesn't show the datepick.

<script>
    $(function() {
        $( ".datepicker" ).datepicker();
    });
</script>

Normally, I create one input when application is started

If I add one button it doesn't appear.

Best Regards.

Answer 1

Use delegate function to achieved this.

Try

$(document).on('focus', '.datepicker', function() {
    $(this).datepicker();
});