0

見積もり作成ページでjquerydatepickerを使用しています。クリックして行を追加するたびに、ページは非表示のテーブル行を複製します。

残念ながら、3行目以降の日付ピッカー（細かく表示されます）を使用すると、選択した行ではなく2番目の行に日付が入力されます。

firebugを使用して、後続の各行の日付フィールド入力に2番目の行と同じ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は次のとおりです。datepickeriinputは、この種の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>

4

1 に答える 1

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;
}
于 2013-01-21T16:29:40.393 に答える