JQuery DatePicker не работает для 3-й и последующих строк в IE

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

К сожалению, для 3-й и последующих строк, когда вы используете указатель даты (который выглядит как fiine), дата вводится во вторую строку, а не в выбранную строку.

Используя firebug, я определил, что поле ввода даты для каждой последующей строки получает тот же идентификатор, что и вторая строка. Это связано с тем, что строка шаблона, клонированная для каждой "добавленной строки", уже присутствует при загрузке страницы.

Кто-нибудь есть какие-либо указатели о том, как я могу обойти эту проблему.

Jquery:

$(document).ready(function(){
    refreshDatepickers();
    $('#additem').click(function(){
        addItem();
        refreshDatepickers();
        return false;
    });


function addItem(){
    var itemRow = $('#rowtemplate');
    var newRow = itemRow.clone().removeAttr('id');
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}

function refreshDatepickers(){
    var tobeDated = $('.datepicker');
    $.each(tobeDated, function(){
        $(this).removeClass('hasDatepicker').datepicker({dateFormat: "dd/mm/yy"});

    });
}

Упрощенный html для строки, которая дублируется для каждой новой строки, выглядит следующим образом: DatePicker iinput получает этот вид id, добавляемый "на лету" (я предполагаю, что плагин datepicker) id="dp1358783794011"

 <div style="display:none;">
<table>
    <tr id="rowtemplate">
        <td><input type="text" class="qi-name" name="items[title][]"/></td>
        <td><textarea class="qi-desc" name="items[description][]"></textarea></td>
        <td><input type="text" class="qi-del datepicker" name="items[delivery][]"/></td>

        <td class="qi-act">
                <a href="#" class="actAs qi-apply"></a>
                <a href="#" class="qi-delete"></a>
        </td>
    </tr>
</table>

1 ответ

Решение

Предложите кэшировать шаблон строки перед запуском любого другого кода, затем добавьте клон кэшированной строки при добавлении новой строки.

/* remove ".find(':input').val('').end()" if no data will be populated at run time*/
var cacheRow=$('#rowtemplate').clone().removeAttr('id').find(':input').val('').end();

/* run init code*/

function addItem(){    
    var newRow =cacheRow.clone();
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}
Другие вопросы по тегам