jQueryを使って、クリックされたリストのidを取得したいと思います。リストはJSONでPHPから読み込んでいます。

下記のようなコードを書いたのですが、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>

回答の条件
  • 1人2回まで
  • 登録:2009/10/09 17:27:00
  • 終了:2009/10/09 20:20:39

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1419ベストアンサー獲得回数2252009/10/09 20:02:01

ポイント100pt

元のコードでは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);
});

http://semooh.jp/jquery/api/events/live/type,+fn/

id:kt26

出来ました!同じリファレンスサイトを見ていたのですが、liveを使うとは思いませんでした・・。凄く参考になりました。ありがとうございます。

2009/10/09 20:20:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません