Datepicker克隆ID在添加行上保持不变

Question

我有一条SQL语句，它打印出php中的表行，可能有1行或可能有10行。 每行中都有一个日期选择器，当前该日期选择器可单独在每行上工作。 但是，当我单击一行末尾的+图标以添加新行时，日期选择器不会弹出。 似乎分配的ID与前一行相同。 这是我的代码：

JavaScript：

$(window).on('load', function() {
    $(document).ready(function () {

        $(document).on('click', '#purchaseItems .add', function () {
            var row = $(this).closest('tr');
            var clone = row.clone();

            // clear the values
            var tr = clone.closest('tr');
            tr.find('input[type=text]').val('');

            $(this).closest('tr').after(clone);
        });

        $(document).on('keypress', '#purchaseItems .next', function (e) {
            if (e.which == 13) {
                var v = $(this).index('input:text');
                var n = v + 1;
                $('input:text').eq(n).focus();
                //$(this).next().focus();
            }
        });
        $(document).on('keypress', '#purchaseItems .nextRow', function (e) {
            if (e.which == 13) {
                $(this).closest('tr').find('.add').trigger('click');
                $(this).closest('tr').next().find('input:first').focus();
            }
        });
        $(document).on('click', '#purchaseItems .removeRow', function () {
            if ($('#purchaseItems .add').length > 1) {
                $(this).closest('tr').remove();
            }
        });

        $('.datepicker').each(function() {
            $(this).removeClass('hasDatepicker').datepicker();
        });
    });
});

表：

<table id="purchaseItems" name="purchaseItems" class="table table-striped table-condensed">
    <tr>
        <th>Date</th>
        <th>Billable</th>
        <th>Client</th>
        <th>Details</th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td><input class='datepicker' name='from[]' value='$date' size='12'/></td>
        <td>
            <select name='billable[]'>
                <option value='$billable' selected>$billable</option>
                <option value='No'>No</option>
                <option value='Yes'>Yes</option>
            </select>
        </td>
        <td><input type='text' name='client[]' value='$client' size='10'></td>
        <td><input type='text' value='$details' name='details[]' size='10'></td>
        <td><input type='button' name='addRow[]' class='add' value='+' /></td>
        <td><input type='button' name='addRow[]' class='removeRow' value='-' /></td>
    </tr>
</table>

因此，您可以精细地添加行，精细地删除行，更改当前存在的行（包括日期）。 问题是当我按下+按钮时，它添加了该行，但没有弹出日期选择器。

我知道它与克隆ID有关，因此我需要在正确的方向上更改克隆行上的ID。

Answer 1

我解决了：

   $(".datepicker").datepicker();

   $(document).on('click', '#purchaseItems .add', function () {



   $(".datepicker").datepicker("destroy");

    $(".datepicker").removeClass("hasDatepicker").removeAttr('id');


    var row = $(this).closest('tr');
    var clone = row.clone();



    // clear the values
    var tr = clone.closest('tr');
    tr.find('input[type=text]').val('');

    $(this).closest('tr').after(clone);

    $(".datepicker").datepicker();

});

谢谢，如果您有兴趣的话。