動的に作成された要素の特定のセレクタへの参照を取得します。

Question

私は<select>を動的に作成しています。それに変更イベントをバインドするために、私は次のコードを使用しています：

$(document).on('change', $('select[name^="time_types"]'), function() { 
    // do something 
} 

を私は兄弟に、いくつかのテキストを追加するために、この特定の<select>要素への参照を取得する必要があります。例えば

：

$(document).on('change', $('select[name^="time_types"]'), function() { 
    $('select[name^="time_types"]').siblings('.mileageInfo').append('Some text.'); 
} 

明らかにこれが追加されます "いくつかのテキストを。"ページ上の各「<select>」要素の末尾に、「time_types」で始まる名前が付いています。これは私が望むものではありません。

上記の$（document）.on（）関数に渡される特定の<select>への参照を取得して、その要素にのみテキストを追加できるようにするにはどうすればよいですか？

Answer 1

私は私だけ その要素にテキストを追加できるように、上記 に$（文書）.on（）関数に渡され、特定の参照を取得できますか？単に

$(this).siblings('.mileageInfo').append('Some text.'); 

$(this)で

$('select[name^="time_types"]').siblings('.mileageInfo').append('Some text.'); 

を交換

は、現在の選択ボックスを参照します。

ところで、onメソッドはjquery要素をとらない。代わりに、セレクタ文字列を受け取ります。

$(document).on('change', 'select[name^="time_types"]', function() { 
    $(this).siblings('.mileageInfo').append('Some text.'); 
}