创建新行 - 如何让 Datepicker 在重复行上工作答案

【问题标题】：New Row Created - How to Get The Datepickr Working On Duplicated Row创建新行 - 如何让 Datepicker 在重复行上工作
【发布时间】：2015-07-23 20:02:29
【问题描述】：

我的表格中有一行在按下按钮时会重复。见下文：

<tr>
<td valign="top"><input type="text" name="session[]" size="15"></td>
<td valign="top"><textarea name="descr[]" cols="40" rows="5" required></textarea></td>
<td valign="top"><input id='datepick' name='sessDate[]' style='padding:5px;' size='15' required /></td>
</tr>

这一切都很好。您将看到在第 3 列中有一个日期选择器。这由以下因素控制：

<script type="text/javascript" src="js/datepickr.min.js"></script>
  <script type="text/javascript">
  new datepickr('datepick', {
    'dateFormat': 'd/m/Y'
  })

</script>

第一行工作正常，并弹出一个日历。但是，当我单击按钮添加新行时，显然 datepicker 不起作用，因为 'datepicker2' 已被使用。如何让日期选择器在新生成的行上工作？无论如何要这样做，所以它会选择数组，例如 datepicker[] 然后在 js 代码中如何自动将另一个新的 datepickr 添加到脚本中？

如果需要，我可以显示添加新行的代码，它基本上只是复制表格行。

提前致谢

【问题讨论】：

您应该添加一个新行，您有一个带有重复 ID 的控件，这可能是问题所在。如果您无法使用新的唯一 id 生成，您可以添加一个类并使用该类的选择来添加日历：和 js : $('.datepick').datepickr

标签： javascript jquery datepicker

【解决方案1】：

为您的字段提供类。在使用类追加新行调用 datepicker 后。

//code for inserting newRow
$('.Yourclass').datepicker();

你可以使用 Id 选择器。 ID 在您的表单中必须是唯一的，因此请注意 ID。

$('input[id^=datepick]').datepicker();

【讨论】：

注意：它是 datepickr 而不是 UI datepicker！

【解决方案2】：

因此，使用 jQuery，一种方法是使用自定义事件，该事件将在添加新的 input 时触发。然后，自定义事件将遍历所有输入，过滤掉那些已经没有datepickr 实例的事件，并将datepickr 绑定到这些输入。

使用类而不是IDs，因为IDs 需要唯一！

$("button").on("click", function() {
    $("#demo").append('<input type="text" class="datepickr" />').trigger("inputAdded");
});

$("#demo").on("inputAdded", function() {
    
    $(this).find("input.datepickr").filter(function() {
        return $(this).closest(".datepickr-wrapper").length === 0;
    }).each(function() {
        new datepickr(this.tagName, {
            dateFormat: 'd-m-Y'
        });
    });
}).trigger("inputAdded");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://joshsalverda.github.io/datepickr/src/datepickr.min.css" rel="stylesheet" type="text/css"/>
<script src="http://joshsalverda.github.io/datepickr/src/datepickr.min.js"></script>

<div id="demo">
    <input type="text" class="datepickr" />
    <input type="text" class="datepickr" />
</div>

<button>Add more</button>

【讨论】：