Question

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

<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处理新生成的行？反正有没有这样做它所以它拿起数组例如datepicker []然后一些如何在js代码中自动添加另一个新的datepickr到脚本？

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

提前致谢

Answer 1

将字段赋予您的字段。使用类附加新行调用datepicker。

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

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

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

Answer 2

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

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

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

创建新行 - 如何使Datepickr处理重复行

2 个答案: