Jquery add input field and datepicker

Question

When I create input field with jquery datepicker do not work.

I try

$(function() {
$('.datepick').each(function(){
    $(this).datepicker();
});  
}); 

Jquery generated input:

<input name="date[]" class="pure-input-1-2 datepick" type="text" value="">

Jquery code generate input field

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div>'+
            'Iskustvo od:  <input  name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
            '<a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Answer 1

Your code will attach a datepicker to any .datepick elements that are already in the document as of jQuery's ready "event," but it won't do anything to any elements added later .

If you add another element later, you'll need to explicitly attach the datepicker to it, presumably in the code where you added the element.

For instance, after adding the element, this code will attach a date picker to any .datepick that doesn't already have one:

$(".datepick").not(".hasDatepicker").datepicker();

The reason for the .not(".hasDatepicker") is that the datepicker adds that class to elements when it's been initialized on them, so by using .not , we filter out ones that are already set up rather than setting them up again.

---

Re your edit showing the code where you add the input, just add the call:

wrapper.append('<div>'+
'Iskustvo od:  <input  name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
'<a href="#" class="remove_field">Remove</a></div>'); //add input box
wrapper.find(".datepick").datepicker(); // <=====

Also note that I removed the $() from around wrapper ; wrapper is already a jQuery object, no need to call $() again, much less repeatedly in a loop.

Or, again, just put the one-liner I gave earlier at the end of that code.

---

Side note: There's no reason for the each call in your code, just $(".datepick").datepicker(); will loop through them for you.