Как клонировать строку таблицы с помощью средства выбора даты, используя jQuery

Question

У меня похожая проблема. Я могу клонировать строку, и средство выбора даты работает для события фокуса, но кнопка всегда указывает на исходную строку, которая была клонирована. Я пробовал ".removeClass ('hasDatepicker')", и это то, что позволило клонировать указатель даты вообще. Кто-нибудь знает, почему кнопка до сих пор не работает?

Вот мой код:

$(document).ready(function () {
    $(function () {
        $('#addNew').click(function () {
            var tbody = $('#entries tbody');
            var rows = tbody.find('tr').length;
            var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
            newRow.find(':input').val('').each(function () {
                var id = this.id
                if (id) {
                    this.id = this.id.split('_')[0] + '_' + rows;
                }
            }).end().find('.datepicker').removeClass('hasDatepicker').datepicker();
        });
        $('.datepicker').datepicker({
            autoSize: true,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            showOn: 'both',
            buttonImage: '@Url.Content("~/Content/calendar.png")',
            buttonText: 'Choose Treatment Date',
            NextText: 'Next',
            prevText: 'Previous',
            showButtonPanel: true
        });
    });
});

<fieldset>
    <h4>Procedures</h4>
    <table id="entries" border="1">
        <tbody>
            <tr>
                <td>
                    Date of Service
                    <br />
                    <input type="text" id="DateOfService" class="datepicker" />
                </td>
                <td>
                    Procedure Code
                    <br />
                    <input type="text" id="ProcedureCode" />
                    <br />
                    <a href="#" id="procedureLookup">Lookup</a>
                </td>
                <td>
                    Description
                    <br />
                    <input type="text" id="ProcedureCodeDescription" />
                </td>
                <td>
                    <div id="hasToothAndSurface">
                        Tooth
                        <br />
                        <input type="text" id="Tooth" />
                        <br />
                        Surface
                        <br />
                        <input type="text" id="Surface"/>
                    </div>
                    <div id="NoToothSurface" style="display:none">
                        <label for="txtNoToothSurface">Tooth/Surface</label>
                        N/A
                    </div>
                    <br />
                    <a href="#" id="toothSurfaceLookup">Lookup</a>
                </td>
                <td>
                    Fee $
                    <br />
                    <input type="text" id="ProcedureFee" />
                </td>
                <td><button type="button" id="deleteRow" class="remove">Remove</button></td>
            </tr>
        </tbody>
    </table>
    <button type="button" id="addNew">Add Procedure</button>
</fieldset>

Я открыт для любых предложений. Мне нужно, чтобы пользователь мог добавить n-много записей, а затем опубликовать их на моем контроллере asp.net, чтобы я мог их обработать. Я думал об изменении имен входных данных на такие вещи, как:

<input type="text" name="in_dateofService[]" />
<input type="text" name="in_code[]" class="my_date" />
<input type="text" name="in_tooth[]" />
<input type="text" name="in_surface[]" />
<input type="text" name="in_fee[]" />

Похоже, я мог бы обработать их как массивы на почте. Это правильно?

Answer 1

Вам нужно сделать пару вещей. Во-первых, перед клонированием строки отсоедините поля DatePicker (т.е. внутри обработчика щелчков). Затем повторно инициализируйте их после клонирования строки. Прямо сейчас вы инициализируете первый в обработчике ready () только при первой загрузке страницы, но только что клонированная строка должна быть инициализирована.

Я думаю, что объекты datepicker должны быть отключены перед клонированием, потому что в противном случае, когда вы пытаетесь инициализировать вновь клонированную строку, плагин думает, что он уже инициализирован и прерывается. Кроме того, иногда у вас будет несколько кнопок или изображений рядом с полями ввода DatePicker, если вы не отсоедините их в первую очередь.

$(document).ready(function () {
    $('#addNew').click(function () {
        // Detach all datepickers before cloning.
        $('.datepicker').datepicker('destroy');

        var tbody = $('#entries tbody');
        var rows = tbody.find('tr').length;
        var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
        newRow.find(':input').val('').each(function () {
             var id = this.id
             if (id) {
                  this.id = this.id.split('_')[0] + '_' + rows;
             }
        })

        // Reattach all datepickers after cloning.
        $('.datepicker').datepicker({
                autoSize: true,
                changeMonth: true,
                changeYear: true,
                gotoCurrent: true,
                showOn: 'both',
                buttonImage: '@Url.Content("~/Content/calendar.png")',
                buttonText: 'Choose Treatment Date',
                NextText: 'Next',
                prevText: 'Previous',
                showButtonPanel: true
        });
    });

    // Initial datepicker setup on page load.
    $('.datepicker').datepicker({
            autoSize: true,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            showOn: 'both',
            buttonImage: '@Url.Content("~/Content/calendar.png")',
            buttonText: 'Choose Treatment Date',
            NextText: 'Next',
            prevText: 'Previous',
            showButtonPanel: true
    });
});