Datepicker仅更改表第一行中的日期 [英] Datepicker only changes date in first row of table

问题描述

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

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.

有帮助吗?

谢谢

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

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的元素中来初始化小部件时，它将仅在以下元素上起作用在那一刻页面的一部分.

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

在click事件处理程序中发生的情况，即使它们也具有class 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();
    });
});

注意:就像我在评论中提到的那样，请注意不要重复使用元素ID.页面中的每个ID都应该是唯一的.否则，您的标记将无效，并且任何指向该ID的jQuery选择器都将仅返回第一个匹配项，而忽略其余的匹配项.

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.

注意2::您的inputs已将type设置为date.在现代浏览器中，这将导致HTML 5本机日历和jQuery DatePicker日历之间发生冲突.

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.

注意3:.您的第二个input没有设置class datepicker.

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

注释4:尽管您可能不会在HTML标记中看到任何重复的ID，但是DatePicker在添加到元素时会为元素提供随机的ID，如果元素没有没有一个.克隆此元素时，您将创建一个共享相同ID的新元素，这将导致DatePicker始终将Date设置为仅位于第一个input中.找到一种方法来赋予元素适当且独特的IDs，以避免出现此问题和许多其他问题.

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.

演示

这篇关于Datepicker仅更改表第一行中的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！