I have this problem when im trying to display a number of fields, and onclick on those datepicker is supposed to run, if i put the code outside the javascript it works just fine, so there must be something wrong with how i $.each loop it or with the append, but somehow im not getting it to work.
$(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd"
});
var val = [];
$(':checkbox:checked').each(function(i){
val[i] = $(this).attr("id");
});
if(val == "")
{
alert('no selection');
}
else
{
$.post("add_stuff", { "post" : val, "csrf" : cct },
function(data)
{
$("#content").empty();
json = eval('('+data+')');
$.each(json.datecheck, function() {
$("#content").append("<h2>" + this.pName + " - " + this.pDesc + "</h2>");
$("#content").append("<p>Datum: <input type='text' class='datepicker'></p>");
});
});
}
});
The current binding will not work as the element does not exist.
As the addition of the the input field is dynamic, you would need to use JQuery live
Example -
$('.datepicker').live('click', function(){
$(this).timePicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd"
}).focus();
$(this).removeClass('datepicker');
});