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

Question

我的日期選擇器只更改表格第一行的日期。 我創建了表格的一行，然后當有人單擊添加時，該行被克隆並附加到表格中。 日期選擇器在克隆后工作，但僅更改第一行中的值。 這只發生在我每次克隆行時銷毀和部署 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小部件添加到具有datepicker class的元素中來初始化小部件時，該小部件將僅在當時屬於頁面一部分的元素上工作。

對於在第一次調用之后添加的所有其他元素：

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

在click事件處理程序中發生的情況，即使它們也具有class datepicker ，也需要向它們添加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：盡管您可能不會在HTML標記中看到任何重復的ID ，但是DatePicker在添加到元素時會為該元素提供一個隨機ID （如果該元素沒有一個ID 。 克隆此元素時，您將創建一個共享相同ID的新元素，這將導致DatePicker始終僅在第一個input設置Date 。 找到一種方法為您的元素提供適當的唯一IDs以避免出現此問題和許多其他問題。

演示版

Answer 2

克隆后為您的輸入字段提供唯一的 ID。 然后將 datepicker 添加到該輸入。 並希望這能解決您的問題。

$("id").datepicker(); on click event or after cloning.