Datepicker only changes date in first row of table

问题

My datepicker only changes the date in the first row of the table. I create one row of the table and then when a person clicks add, this row is cloned and appended to the table. The datepicker works after cloning but only changes value in the first row. This only happens when I destroy and deploy datepicker every time the row is cloned, otherwise the datepicker only works in the first row of my table.

Any help?

Thanks

HTML code

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

回答1:

When you're initiating the DatePicker widget by adding it to the elements with class datepicker, it will work just on the elements that are part of the page on that moment.

For every other element added after this first call:

$('.datepicker').datepicker();

Which happens in your click event handler, you need to add the DatePicker to them, even though they also have the class datepicker. They're new elements in the page so:

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

Note: Like I mentioned in the comments, be aware of elements IDs to not get duplicated. Every ID in the page should be unique. Otherwise your markup will be invalid and any jQuery selector pointing to that ID will return just the first occurrence and will ignore the rest.

Note 2: Your inputs have type set to date. In modern browsers this will cause a conflict between the HTML 5 native calendar and the jQuery DatePicker one.

Note 3: Your second input doesn't have the class datepicker set.

Note 4: Although you may not see any duplicated ID in your HTML markup, DatePicker gives the element a random ID when added to it, if the element doesn't have one. When you clone this element, you're creating a new element sharing this same ID, which will cause the DatePicker to always set the Date just in the first input. Find a way to give your elements proper and unique IDs to avoid this and many other issues.

Demo

来源：https://stackoverflow.com/questions/26280445/datepicker-only-changes-date-in-first-row-of-table

标签

javascript

jquery

datepicker