javascript - jqueryで動的に作成されたhtml要素を数える

Question

現在のドキュメントで値を持つ入力の数を数えています。入力を動的に追加した場合を除いて、正常に動作します。そこに値を取得できません。

たとえば、私は持っているかもしれません

<input id="participant-1"/>
<input id="participant-2"/>
...

ボタンのクリック後に動的に作成

<input id="participant-15" />

次のようなforループでそれぞれの値を取得します

for(var i =1 ; i <25; i++)
{
  ...$('input#participant-' + i).val();
}

これらの入力のそれぞれの値をチェックするために for ループを実行すると、動的に作成されなかった入力の値のみが取得されます。.on()ここで他の質問を見てきましたが、私が達成しようとしていることのようなものを適用する方法がまだわかりません。

NEW FOLLOW UP QUESTION わかりました。ここで、.on の使用方法についてさらに明確にする必要があると思います。

ここに jsfiddle があります: JsFiddle の例

新しい要素を作成し、すべてのテキストボックスをぼかすと、値を持つ要素の数を計算してログに記録したいと思います。現在、静的な要素を使用してぼかしイベントから応答します。動的に作成された要素では機能しません

score 8 · Accepted Answer

共通のクラスを与えます:

<input class="textbox" id="participant-1"/>
<input class="textbox" id="participant-2"/>

そして、次のように取得します。

var values = [];
$('.textbox').each(function(){
    values.push($(this).val());
});
console.log(values)

そして編集に答えるには：

構文は次のとおりです: $(container_selector).on(event_type, target_selector, callback)

$('.name').on('blur', 'input', calculate_total);

score 3 · Accepted Answer

CSS 属性セレクターの使用も検討できます。

    $("input[id|=participant]").each(function(){
            // something
    });

3 に答える 3