Edited at

【誤りあり】jQueryで追加した要素を操作するにはon()メソッドで

More than 1 year has passed since last update.


重要・この記事は誤った知識を元に書きました

この記事は、JS・jQueryの言語仕様をあまり理解していない時期に、jQueryを使った経験則を元にして書きました。

近いうちに修正版を書く予定ですが、時間がないため、参照程度にとどめてください。



概要

Ajaxなどで追加した要素に対して、.clickメソッドなどでの操作は行えない。

操作を行う場合、onメソッドでイベントを指定して操作する。

$(".bar").append("<a class=\"foo\" href=\"http://www.example.com\">Sample Text</a>");

$(document).on('click','.foo',function(){
alert('fooがクリックされました');
return false;
});


注意

1.8以前のjQueryにはon()メソッドが存在しない。

live()メソッドで対応を行う。

$(".bar").append("<a class=\"foo\" href=\"http://www.example.com\">Sample Text</a>");

$('.foo').live('click',function(){
alert('fooがクリックされました');
return false;
});


参考にしたサイト

jQuery の on() と off() を理解する - tacamy.blog