Question

我在引用构建页面中使用jquery datepicker。每次单击添加行时，页面都会复制隐藏的表格行。

当您使用datepicker（显示为fiine）时，对于第3行和后续行不幸，日期将输入到第二行而不是选定的行。

使用firebug我已经确定每个后续行的日期字段输入与第二行的id相同。这是因为当我加载页面时，为每个“添加的行”克隆的模板行已经存在。

有没有人知道如何解决这个问题。

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>

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

jquery datepicker不适用于IE中的第3行和后续行

1 个答案: