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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -