javascript - JQuery Date Picker Does not work after new Div Created -

javascript - JQuery Date Picker Does not work after new Div Created -

i have form.

script <script> // function add together set of elements var = 1; function new_workexp() { we++; var newdiv = $('#workexp div:first').clone(); newdiv.attr('id', we); var dellink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:delwe(' + + ')" > delete work experence ' + + ' </a>'; newdiv.find('tr:first th').text('workexp ' + we); newdiv.append(dellink); $('#workexp').append(newdiv); newdiv.find('input:text').val(''); } // function delete newly added set of elements function delwe(eleid) { d = document; var ele = d.getelementbyid(eleid); var parentele = d.getelementbyid('workexp'); parentele.removechild(ele); //we--; } $(function() { $( "#datepicker1" ).datepicker1({changemonth: true, changeyear: true}); $( "#datepicker2" ).datepicker2({changemonth: true, changeyear: true}); }); </script> html <legend>work experence</legend> <div id="workexp"> <div id="1"> <br /> <a class="btn btn-info" href="javascript:new_workexp()"> add together new work experence </a> <br /> <table border="3"> <tbody> <tr> <th colspan="4" style="background-color:#b0c4de;">work experence 1</th> </tr> <tr> <td> <p>please select start date<input type="text" name="sdate[]" id="datepicker1" class="hasdatepicker"></p> </td> <td> <p>please select end date<input type="text" name="edate[]" id="datepicker2" class="hasdatepicker"></p> </td> </tr> </tbody> </table> </div> </div> <div id="ui-datepicker1-div" class="ui-datepicker1 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> <div id="ui-datepicker2-div" class="ui-datepicker2 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

what trying figure out why when page loads datepickers work fine , after create new div element datepickers no longer work

when looking @ source see class gets added "hasdatepicker" comes either ejquery-ui.js or sjquery-ui.js belive culprit.

i have jsfiddle illustration cannot date picker work. http://jsfiddle.net/wyyg2avu/1/

working illustration http://thenerdservice.com/add/index.php

i suspect:

$( "#datepicker1" ).datepicker1({changemonth: true, changeyear: true}); $( "#datepicker2" ).datepicker2({changemonth: true, changeyear: true});

is problem, since there no jqueryui datepicker1 or datepicker2 method

try

$( "#datepicker1, #datepicker2" ).datepicker({changemonth: true, changeyear: true});

instead

fixed fiddle

javascript jquery datepicker