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

jQueryのクリック処理について相談です。
リスト(li)内にあるaリンクをクリックすると、ダイアログボックスが出て
クリックしたliに割り当てたid名を表示するようにしています。

以下のソースを書いたのですが、連続してリンクをクリックすると
複数ダイアログボックスが表示されたりid名が違ったりして、挙動がおかしいです。
ソースの指摘と改善方法をアドバイスしていただければと思います。

// Javascript
$('#myList li').live("click",function(){
var id = $(this).attr("id");

$(this).find('.select').live("click",function(){
if(confirm('IDは'+id+'ですか?')){
return true;
}else{
return false;
}
});
});

// HTML
<div id="myList">
<ul>
<li id="list01"><a href="javascript:void(0);" class="select">テストA</a></li>
<li id="list02"><a href="javascript:void(0);" class="select">テストB</a></li>
</ul>
</div>

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

▽最新の回答へ

1 ● cuspos
●80ポイント

二重でclickイベントを書いているのがおかしな動作の原因かと。

修正したソースをいかに書いてみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript">

 $(document).ready(function(){ 
 $('#myList li').live("click",function(){
 var id = $(this).attr("id");
 confirm('IDは'+id+'ですか?');
 });
 });

 </script> 
 <title>test</title>
 <body>
 <div id="myList">
<ul>
 <li id="list01"><a href="#" class="select">テストA</a></li>
 <li id="list02"><a href="#" class="select">テストB</a></li>
</ul>
 </div>
 </body>
</html>
◎質問者からの返答

liの中のaにclass="select"をしているのは、< li >< /li >の間に他のタグが入る可能性があるからなんです。

だから単純に1つのリンクからID名を取得するだけなら上記のソースでいけますが、「li内のどのリンクをクリックしたか」で処理を分けたいので、質問に書いたようなソースになりました。


ですので、class="select"を判定してダイアログボックスが出るような書き方・でアドバイスがいただければと思います。

関連質問


●質問をもっと探す●



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