下記のようなコードを書いたのですが、JSONで読み込んだリストをクリックして反応がありません。
JSONで読み込まずに直接HTMLに<li>を書けばアラートが表示されるので、JSONでリストを読み込んだのが
原因だと考えられます。しかし、動的にリストを読み込みたいのですが、何か方法はないでしょうか？
// PHPからliの内容を取得
function getList(data){
// dataには<li id="1">aaa</li><li id="2">bbb</li>が入っているとする
$("#myList").append(data);
}
$.getJSON('list.php',null,getList);
// クリックしたliのidの値をアラートで表示
$("#myList li").click(function(){
var str = $(this).attr("id");
alert(str);
});
// HTML側
<ul id="myList"></ul>
元のコードではclickイベントを設定された時点ではまだ対象の li が存在していない為、実際にはどの要素にもclickイベントは割り付けられていません。なので読み込んだリストに対するクリックには反応が無いのです。
この場合、通常はコールバック関数であるgetList内で $("#myList").append(data); を実行した後のタイミングで、再度 li に対して click イベントを割り付ける必要があります。
しかし、上記のようなコードを書いても動くと思いますが、jQueryの1.3で追加された live 関数を使うとこのようなケースをとても簡潔に記述することが出来ます。
clickではなくliveを使って以下のようにイベントを割り付けます。すると動的に作成された要素に対してもclickイベントが動作することが確認できると思います。
// クリックしたliのidの値をアラートで表示 $("#myList li").live("click", function(){ var str = $(this).attr("id"); alert(str); });
出来ました！同じリファレンスサイトを見ていたのですが、liveを使うとは思いませんでした・・。凄く参考になりました。ありがとうございます。