2

jQuery ".clone()" を使用して新しい行を追加するフォームがあります。すべてが素晴らしいように見えますが、拘束力の問題があります。基本的に、初期化では、jQuery の ".datepicker()" 関数を 1 つのフィールド (クラスに基づく) に使用します。「.clone()」を単独で使用すると、新しいアイテムで「.datepicker()」機能を使用できません。「.clone(true)」を使用すると機能が得られますが、クローンされた行の場合、実際にクリックされた行ではなく、クローンされた行の日付が入力されます。

バインド解除/再バインドを試みましたが、どれも機能しません。では、jQuery の楽しさをすべて適切に機能させながら、新しい行をフォームに追加するにはどうすればよいでしょうか?

一番

編集 1 (jQuery):

関数 addLineItem(){
    $('#charges_table tr:last').clone(true).insertAfter('#charges_table tr:last');
}

$(関数(){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("#add_line_item").bind('クリック',関数(イベント){
        event.preventDefault();
        addLineItem();
        $('.date_pick').datepicker('destroy');
        $('.date_pick').datepicker();
    }))
}))

参考までに、私はクラスにのみバインドしており、HTML 要素は ID を使用していません。

4

2 に答える 2

0

まず、記述されているように、メソッドaddLineItemは、テーブルの最後の行が何であれ、常にクローンを作成します$('#charges_table tr:last')。クリックが発生したテーブル行のクローンを作成したいようです。その場合は、次のような方法でうまくいくはずです。

function addLineItem(row){
    $(row).clone(true).insertAfter('#charges_table tr:last');
}

$(function(){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("#add_line_item").bind('click',function(event){
        event.preventDefault();
        // Pass the closest 'tr' element to the element clicked.
        addLineItem($(this).closest('tr'));
    });
});

このコードはテストしていませんが、私のプロジェクトの1つにある同様のテーブル行のクローン作成コードに基づいています。

于 2011-12-21T18:54:47.053 に答える
0

.clone()要素を DOM に挿入し直す前に、要素の ID を変更していますか? そうしないとIDが重複してしまい、トラブルの元になります。

于 2011-12-21T17:25:58.860 に答える