javascript - 日期选择器仅更改表格第一行中的日期

Question

我的日期选择器仅更改表格第一行中的日期。我创建表的一行，然后当有人单击“添加”时，该行将被克隆并附加到表中。日期选择器在克隆后工作，但仅更改第一行中的值。仅当我每次克隆行时销毁并部署日期选择器时才会发生这种情况，否则日期选择器仅在表的第一行中工作。

有什么帮助吗？

谢谢

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();
});

Answer 1

当您通过将 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 以避免此问题和许多其他问题。

Demo