applying Datepicker to newly created input using Live()

Question

Im having a problem with the jqurey datepicker. My form has a "add another" button to give the user a extra row so they can enter more then one match. I want the date to display the datepicker and found how to do it with the live() function

        $(function() {
        $('#AddAnother').bind('click', function(event) {
            var tablerow = $('#CreateMatch tr:last').html();
            $('#CreateMatch tr:last').after('<tr>' + tablerow + '</tr>');
        });

        $('input.Datetime').live('click', function() {
            $(this).datepicker({
                showOn: 'focus',
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd-mm-yy"
            }).focus();
        });

    });

As you can see there is the addanother bind which builds the new row and the .live feature which should apply it to newly added textboxes with the Datetime class. inspecting the elements with chrome shows that they textbox is getting "hasDatePicker" class that jquery adds to them but i think this is only because of how its dupilicating the row.

Here is all my html!

<div id="MatchForm">
        <table id="CreateMatch">
            <tr>
                <th>Prospect</th>
                <th></th>
                <th>Opponent</th>
                <th>Match Date</th>
                <th>Location</th>
            </tr>
            <tr>
                <td>
                    <select name="Prospect">
                        <option value="">Select prospect...</option>
                        <% foreach (var p in Model.AllProspects){  %>
                        <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option>
                        <%} %> 
                    </select>
                </td>    
                <td>vs</td>
                <td>
                    <select name="opponent">
                        <option value="">Select opponent...</option>
                     <% foreach (var p in Model.AllBoxers   )
                       {  %>
                        <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option>
                    <%} %> 
                    </select>                    
                </td>
                <td><input type="text" class="Datetime" name="matchDate" style="width:100px" /></td>
                <td><input type="text" id="Location" name="Location" style="width:100px" /></td>
            </tr>
        </table>
        <input type="button" name="AddAnother" id="AddAnother" value="Add Another" />
        <input type="submit" name="submit" value="Submit" />
    </div>

So you know it does work on the first textbox which loads up but the live binding doesnt seems to work and apply it to new textboxes!

Answer 1

The "live()" facility is only about event handling. That code to set up the datepicker will only happen, therefore, when a "click" event happens. The datepicker code won't have set up the handlers it uses at that point.

You might try having your event handler keep a flag on the elements (with jQuery's "data()" facility). If you see an element without the flag, then the click handler can set up the datepicker and the flag, and trigger another "click" on itself. I haven't tried that however.

Answer 2

The problem here is that when a .datepicker() gets applied, it adds a class to the input called hasDatepicker, and if it finds this, won't bind again. If you open a date picker on the row that's getting cloned, it adds this class...and copying the class to future rows leaves them datepicker-less.

To resolve this just remove the class when cloning the row, like this:

$('#AddAnother').bind('click', function(event) {
    $('#CreateMatch tr:last').clone().appendTo('#CreateMatch')
                             .find('input.Datetime')
                             .removeClass('hasDatepicker');
});

You can give it a try here.