人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:Click HTML jQuery JSON PHP
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●100ポイント ベストアンサー

元のコードでは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/

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ