javascript - jQuery datepicker on dynamically generated rows -
i dynamically generating table rows using following javascript codes:
$('#addnew').on('click', function() { var clone = $('table.table-responsive tr.cloneme:first').clone(); console.log(clone); clone.append("<td><button class='deleteadded btn btn-danger'>remove</button></td>") $('table.table-responsive').append(clone); calculatesum(); });
and script appending jquery calendar date inputs
$(function() { $('input').filter('.datepicker').datepicker({ dateformat: 'yy-mm-dd', changemonth: true, changeyear: true, }); });
now problem facing jquery calendar pops in first row. doesn't work on rows generated.
this in html
<td> <input type="text" class="form-control datepicker" name="invoicedate[]" readonly="readonly" /> </td>
please tell me how make jquery calendar work on rows dynamically generated. looked around google nothing helped.
thanks in advance.
you have initiate datepicker after new rows created
jquery(function($) { //create original copy of row clone later var $tr = $('table.table-responsive tr.cloneme:first').clone(); //add dp existing rows adddp($('input.datepicker')); $('#addnew').on('click', function() { var clone = $tr.clone(); console.log(clone); clone.append("<td><button class='deleteadded btn btn-danger'>remove</button></td>"); //add dp new row adddp(clone.find('input.datepicker')); $('table.table-responsive').append(clone); calculatesum(); }); function adddp($els) { $els.datepicker({ dateformat: 'yy-mm-dd', changemonth: true, changeyear: true, }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <table class="table-responsive"> <tr class="cloneme"> <td> <input type="text" class="form-control datepicker" name="invoicedate[]" readonly="readonly" /> </td> </tr> </table> <button id="addnew">add</button>
Comments
Post a Comment