Question

我的日期选取器仅更改表格第一行中的日期。我创建了一行表，然后当一个人点击添加时，克隆该行并将其附加到表中。 datepicker在克隆后工作，但只更改第一行中的值。只有在每次克隆行时销毁和部署datepicker，才会发生这种情况，否则datepicker只能在我表的第一行中运行。

任何帮助？

由于

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 datepicker。他们是页面中的新元素，所以：

$(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：您的inputs type设置为date。在现代浏览器中，这会导致HTML 5原生日历与jQuery DatePicker日历之间发生冲突。

注3：您的第二个input未设置class datepicker。

注4：虽然您的ID标记中可能看不到任何重复的HTML，但DatePicker会给元素随机ID添加到它，如果元素没有。当您克隆此元素时，您正在创建一个共享同一ID的新元素，这会导致DatePicker始终在第一个Date中设置input }。找到一种方法来为您的元素提供正确且独特的IDs以避免此问题和许多其他问题。

Demo

Datepicker仅更改表格第一行中的日期

1 个答案: