1

順序付きリストがあります。順序付きリスト内に、リスト要素ごとに 2 つのテキスト ボックスが必要です。次に、順序付きリストの最後に、ユーザーが最後の要素の最後のテキスト ボックスに入力するときに、2 つのテキスト ボックスを含む別のリスト要素を追加したいと思います。

次のような JQuery コードがあります。

$("ol li input:last-child").change(function(){
    $("ol").append('<li>Name: <input type="text"/><input type="text"/></li>');
});

私のHTMLは次のようになります。

<ol>
    <li><input type="text"/><input type="text"/></li>
    <li><input type="text"/><input type="text"/></li>
</ol>

私が望むのは、ユーザーが最後の要素に入力したときに、新しいリスト要素 (2 つのテキスト ボックスを含む) をリストの最後に追加して、ユーザーが完了するまで入力を続けることができるようにすることです。

現時点で何が起こっているかというと、ユーザーは現在のリスト要素の最後の入力ボックスに入力でき、私のコードは別のリスト要素を作成しますが、新しく作成されたリスト要素 (これは最後の子になるはずです) に入力しません。私が望んでいたように、追加のリスト要素を作成します。

4

2 に答える 2

3

そのために使用.on()します。

$(document).on('change','ol li:last input:last-child',function()
{
    $("ol").append('<li>Name: <input type="text"/><input type="text"/></li>');
});

あなたDOMは動的に追加さchange event れるため、動的に読み込まれたコンテンツには適用されないため.on、そのために役立ちます。

Official Document

Description: 1 つまたは複数のイベントのイベント ハンドラー関数を、選択した要素にアタッチします。

于 2013-04-29T03:48:34.447 に答える
2

試す

$("ol").on('change', 'li:last input:last-child', function(){
    $(this).closest('ol').append('<li>Name: <input type="text"/><input type="text"/></li>');
});

デモ:フィドル

于 2013-04-29T03:48:00.523 に答える