Question

Date picker not working when i'm using add more button .below is code. i will put only one id first.

$('button#add_more').on('click', function() {
    var table = $('table#myTable tbody'),
        len = $('input[type=text]', table).length;
  table.append('<tr><td><input name="field-'+ (len+1)+'" type="text" id="datepicker" /></td></tr>');
});
$(function() {
    $( "#datepicker" ).datepicker();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table id="myTable" border="1">
  <tbody>
   
  </tbody>
</table>

<button id="add_more">Add</button>

Answer 1

你需要为html提供更多的脚本行。将'#datepicker'设为一个类，因为您使用多个日期，然后将$（'。datepicker'）。datepicker（）添加到您的添加函数。

$('button#add_more').on('click', function() {
  var table = $('table#myTable tbody'),
    len = $('input[type=text]', table).length;
  table.append('<tr><td><input name="field-' + (len + 1) + '" type="text" class="datepicker" /></td></tr>');
  $(".datepicker").datepicker();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table id="myTable" border="1">
  <tbody>

  </tbody>
</table>

<button id="add_more">Add</button>

Datepicker Not working with add more button

1 个答案: