применение Datepicker к вновь созданному вводу с помощью Live ()

Question

У меня проблема с датчиком выбора jQuery.В моей форме есть кнопка «Добавить еще», чтобы дать пользователю дополнительную строку, чтобы он мог ввести более одного совпадения.Я хочу, чтобы дата отображала средство выбора даты, и узнал, как это сделать с помощью функции live ()

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

    });

. Как вы можете видеть, существует привязка AddAnother, которая создает новую строку, и .liveфункция, которая должна применять его к вновь добавленным текстовым полям с классом Datetime.Проверка элементов с помощью chrome показывает, что в их текстовое поле попадает класс «hasDatePicker», который добавляет к ним jQuery, но я думаю, что это только из-за того, как он дублирует строку.

Вот весь мой 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>

Итак, вы знаете, что он работает с первым текстовым полем, которое загружается, но динамическое связывание не работает и применяет его к новым текстовым полям!

Answer 1

Функция live () предназначена только для обработки событий. Этот код для установки средства выбора даты произойдет только тогда, когда произойдет событие «щелчка». Код DatePicker не будет устанавливать обработчики, которые он использует в тот момент.

Вы можете попытаться, чтобы ваш обработчик событий держал флаг на элементах (с помощью функции data () jQuery). Если вы видите элемент без флага, то обработчик щелчков может установить указатель даты и флаг и инициировать еще один «щелчок» для себя. Однако я этого не пробовал.

Answer 2

Проблема здесь в том, что когда применяется .datepicker(), он добавляет класс к входу с именем hasDatepicker и, если найдет это, больше не будет связываться. Если вы открываете средство выбора даты в строке, которая клонируется, он добавляет этот класс ... и копирование класса в будущие строки оставляет их без даты.

Чтобы решить эту проблему, просто удалите класс при клонировании строки, например:

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

Вы можете попробовать здесь .