2014年12月5日金曜日

jQueryで、後から追加した要素に対してイベントハンドラを追加する「.on()」

jQueryで、後から追加した要素に対してイベントハンドラを追加する「.on()」 要素を動的に書き換えて、アクセス出来ない場合は、試してみるといいかもしれません。最高に便利です。救われました。

下記の例で言うと、「class="row"」は、「id="birthYear"」よりも上位のクラスです。 上位のクラスにイベントハンドラを追加することで、問題なく動くようになります。
$('.row').on('click', '#birthYear', function() {
  alert($('#birthYear').val());
});

selectYear = '<select id="birthYear" name="birthYear">\n
<option value="2005">2005</option>\n
<option value="2004">2004</option>\n
<option value="2003">2003</option>\n
<option value="2002">2002</option>\n
<option value="2001">2001</option>\n
</select>\n' ;

$('#birthYear').replaceWith(selectYear);

参考サイト
jQuery#onを便利に使う(Qiita)
jQuery .on('change', function() {} not triggering for dynamically created inputs(Stack Overflow)

0 件のコメント:

コメントを投稿