jQueryで後から追加した要素へのclickイベントはonを使う

jQueryの appendとか ajaxとかで取得した要素へ clickイベントを発動させる場合、onを使う。

ぶっちゃけ以上なんだけど。

1.jQueryで追加した要素へ clickイベントを発動

例えば、tableに動的に値を追加される場合を考える。
基本はこんな感じ。

<table>
<thead>
</thead>
<tbody>
<tr><td><a href="javascript:void(0)">1</a></td></tr>
<tr><td><a href="javascript:void(0)">2</a></td></tr>
<tr><td><a href="javascript:void(0)">3</a></td></tr>
</tbody>
</table>

そこへ jQueryで appendで追加していった時にこうなる。

<table>
<thead>
</thead>
<tbody>
<tr><td><a href="javascript:void(0)">1</a></td></tr>
<tr><td><a href="javascript:void(0)">2</a></td></tr>
<tr><td><a href="javascript:void(0)">3</a></td></tr>
<tr><td><a href="javascript:void(0)">4</a></td></tr>
<tr><td><a href="javascript:void(0)">5</a></td></tr>
</tbody>
</table>

この場合の clickイベントについては on でクリックイベントを書く。

$('#td').on('click','a', function(){
    // $('#tdcity').click(function(){
    var value = $(this).val();
    $("#value").val( value );
});

コメントアウトしているやり方で書くと1〜3までしかイベントが発動しない。

onを使うやり方は1.7〜、〜1.6までは liveで書く必要がある。

参考

onload後に構築した要素に対してイベントや関数が効かないときには – console.lealog();

jQuery afterやappendで追加した要素にもクリック等のイベントを適応する方法(jQuery1.3から1.10まで) | Stronghold

jQueryで後から追加した要素でもクリックイベントを取得するメモ | work.log

コメント

タイトルとURLをコピーしました