我的日期选择器仅更改表格第一行中的日期。 我创建表的一行,然后当有人单击“添加”时,该行将被克隆并附加到表中。日期选择器在克隆后工作,但仅更改第一行中的值。仅当我每次克隆行时销毁并部署日期选择器时才会发生这种情况,否则日期选择器仅在表的第一行中工作。
有什么帮助吗?
谢谢
HTML 代码
<table>
<thead>
<tbody id="dp1412866353992">
<input id="templateId" type="hidden" value="-1" name="templateId">
<input id="isNew" type="hidden" value="true" name="isNew">
<tr>
<td>
<input id="periodIds" type="hidden" value="-1" name="periodIds">
<input id="periodsNames" width="100%" type="string" value="q1" name="periodsNames">
</td>
<td>
<input id="dp1412866353991" class="datepicker hasDatepicker" type="date" value="Thu Oct 09 15:52:33 BST 2014">
</td>
<td>
<td>
</tr>
<tr>
<td>
<input id="periodIds" type="hidden" value="-1" name="periodIds">
<input id="periodsNames" width="100%" type="string" value="q1" name="periodsNames">
</td>
<td>
<input id="dp1412866353991" class="datepicker hasDatepicker" type="date" value="Thu Oct 09 15:52:33 BST 2014">
</td>
<td>
<td>
</tr>
<tr>
<td>
<input id="periodIds" type="hidden" value="-1" name="periodIds">
<input id="periodsNames" width="100%" type="string" value="q1" name="periodsNames">
</td>
<td>
<input id="dp1412866353991" class="datepicker hasDatepicker" type="date" value="Thu Oct 09 15:52:33 BST 2014">
</td>
<td>
<td>
</tr>
</tbody>
</table>
Javascript
$('#add-row').on('click', function (e) {
e.preventDefault();
//datepicker does not work witout being created and destroyed on each row.
//$('.datepicker').datepicker('destroy');
var tableBody = $('#periodsTable > tbody');
var lastRowClone = $('tr:last-child', tableBody).clone();
//setting periodId to -1 for any created periods
$('td:first input[name=periodIds]', lastRowClone).val("-1");
tableBody.append(lastRowClone);
//$(".datepicker").datepicker();
});
最佳答案
当您通过将 DatePicker
小部件添加到具有 class
datepicker
的元素来启动该小部件时,它将仅对以下元素起作用:是那一刻页面的一部分。
对于第一次调用后添加的所有其他元素:
$('.datepicker').datepicker();
这发生在您的 click
事件处理程序中,您需要向它们添加 DatePicker
,即使它们也有 class
日期选择器
。
它们是页面中的新元素,因此:
$(function () {
// Adding DatePicker to the elements already in the page.
$('.datepicker').datepicker();
$('#add-row').on('click', function (e) {
e.preventDefault();
var tableBody = $('#periodsTable > tbody');
var lastRowClone = $('tr:last-child', tableBody).clone();
//setting periodId to -1 for any created periods
$('td:first input[name=periodIds]', lastRowClone).val("-1");
tableBody.append(lastRowClone);
// Adding DatePicker to the new element added to the page.
// As the cloned element has the class hasDatepicker already there,
// DatePicker thinks it's initialised for it.
// You need to remove this class before adding DatePicker to it.
lastRowClone.find('.datepicker').attr('id','').removeClass('hasDatepicker').datepicker();
});
});
注意: 正如我在评论中提到的,请注意元素 ID,以免重复。页面中的每个 ID 都应该是唯一的。否则,您的标记将无效,并且任何指向该 ID 的 jQuery
选择器将仅返回第一个匹配项,而忽略其余的匹配项。
注释 2:您的输入
将类型
设置为日期
。在现代浏览器中,这将导致 HTML 5
native 日历和 jQuery
DatePicker
之间发生冲突。
注释 3:您的第二个 input
没有设置 class
datepicker
。
注释 4: 虽然您可能在 HTML
标记中看不到任何重复的 ID
,但 DatePicker
给出了如果元素没有 ID,则在添加到该元素时会生成一个随机 ID
。当您克隆此元素时,您将创建一个共享相同 ID
的新元素,这将导致 DatePicker
始终仅设置 Date
在第一个输入
中。找到一种方法为您的元素提供正确且唯一的 ID
以避免此问题和许多其他问题。
关于javascript - 日期选择器仅更改表格第一行中的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26280445/