jquery - Javascript new row function do not render other Javascript function -

i displaying table texbox inside, texboxes have datepicker class render calender. trying add row inside table clicking link provided. can add row new texboxes inside row not display datepicker calender.

    jquery(function(){       var counter = 5;       jquery('a.sumjobs').click(function(event){           event.preventdefault();           counter++;           var newrow = jquery('<tr><td>'+ counter +'</td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker hasdatepicker" id="from'+ counter +'" /></td' +               counter + '><td><input name="to[]" type="text" class="datepicker hasdatepicker" id="to'+ counter +'" /></td>' +               counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>');           jquery('table.sumjobs').append(newrow);       });   });    $(function() {         $( ".datepicker" ).datepicker({           changemonth: true           ,changeyear: true           ,yearrange: '1960:' + new date().getfullyear()         });     }); 

here link renders new row

<a href="#" title="" class="sumjobs"><center>add experience</center></a> 

when this:

$(".datepicker") 

you selecting elements have datepicker class exist in dom. not doing selecting elements might have datepicker class exist time later.

so need after creating new row select child element , apply .datapicker again.

you like:

newrow.find(".datepicker").datepicker({     //...your configuration goes here }); 

after create newrow.

to avoid lot of duplication, i'd store parameters datepicker in variable somewhere:

var pickeroptions = {       changemonth: true       ,changeyear: true       ,yearrange: '1960:' + new date().getfullyear() } 

so can do:

newrow.find(".datepicker").datepicker(pickeroptions); 

so wrap this:

$(function(){     var counter = 5;     $('a.sumjobs').click(function(event){         event.preventdefault();         counter++;         var newrow = jquery('<tr><td>'+ counter +'</td><td><input type="text" name="designation[]" id="employer3" /></td><td><input name="from[]" type="text" class="datepicker hasdatepicker" id="from'+ counter +'" /></td' +           counter + '><td><input name="to[]" type="text" class="datepicker hasdatepicker" id="to'+ counter +'" /></td>' +           counter + '<td><input type="text" name="totalexp[]" id="totalexp" /></td></tr>');         $('table.sumjobs').append(newrow);         newrow.find(".datepicker").datepicker(pickeroptions);     });      var pickeroptions = {         changemonth: true         ,changeyear: true         ,yearrange: '1960:' + new date().getfullyear()     };      // if there no .datepicker elements @ start, don't need following line     $( ".datepicker" ).datepicker(pickeroptions); });