javascript - 日期选择器无法使用“添加更多”按钮

Question

当我使用“添加更多”按钮时，日期选择器不起作用。下面是代码。 我只会先放一个ID。

$('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>