How to clone a table row with a datepicker, using jQuery

I am having a similar problem. I am able to clone the row and the datepicker works for the focus event, but the button always points back to the initial row that was cloned. I have tried the ".removeClass('hasDatepicker')" and that is what enabled the datepicker to be cloned at all. Does anyone know why the button is still not working?

Here is my code:

$(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>

I am open to any suggestions. I need the user to be able to add n-many records and then post them to my asp.net controller so that I can process them. I was thinking of changing the names of the input to things like:

<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[]" />

As it looks like I could then process them as arrays on the post. Is that correct?

You need to do a couple of things. First, detach the datepicker fields before cloning the row (i.e. inside the click handler). Then re-initialize them after cloning the row. Right now you're only initializing the first one in the ready() handler when the page first loads, but the newly-cloned row needs to be initialized also.

I think the datepicker objects need to be detached before cloning because otherwise when you try to initialize the newly-cloned row, the plugin thinks it's already been initialized and aborts. Also, you'll sometimes end up with multiple buttons or images next to the datepicker input fields if you don't detach them first.

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