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 );
});
コメントアウトしているやり方で書くと１〜３までしかイベントが発動しない。
onを使うやり方は1.7〜、〜1.6までは liveで書く必要がある。
参考
onload後に構築した要素に対してイベントや関数が効かないときには – console.lealog();
jQuery afterやappendで追加した要素にもクリック等のイベントを適応する方法（jQuery1.3から1.10まで） | Stronghold
コメント