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;
}