Question

I am having a problem with the jQuery 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 it is 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 doesn’t seem 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.