日期选择器不适用于添加更多按钮答案

【问题标题】：Datepicker Not working with add more button日期选择器不适用于添加更多按钮
【发布时间】：2015-09-17 08:50:26
【问题描述】：

当我使用添加更多按钮时，日期选择器不起作用。下面是代码。我只会把一个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>

【问题讨论】：

datepicker 属于 jquery UI，不是标准 jQuery 库的一部分。
你需要包含 Jquery UI 库 ....src=code.jquery.com/ui/1.11.4/jquery-ui.js

标签： javascript jquery html datepicker

【解决方案1】：

上面的 html 还需要几行脚本。将 '#datepicker' 改为一个类，因为您使用多个日期，然后将 $('.datepicker').datepicker() 添加到您的 add 函数中。

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

【讨论】：