jQueryのクリック処理について相談です。

Question

kt26

119

114もっと見る

80pt

ウェブ制作

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>

回答の条件

1人2回まで

登録：2009/10/14 04:21:58
終了：2009/10/14 21:44:24

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

cuspos 2009/10/14 10:19:08

ソースの中に文字コード指定入れ忘れました。UTF-8です。
cuspos 2009/10/14 17:06:56

こんなイメージですか？

>|html|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

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

</script>
<title>test</title>
<body>
<div id="myList">
<ul>
<li id="list01"><a href="#" class="select">テストA</a><span> | </span><a href="#">クラス select じゃない</a></li>
<li id="list02"><a href="#" class="select">テストB</a><span> | </span><a href="#">クラス select じゃない</a></li>
</ul>
</div>
</body>
</html>
||<
kt26 2009/10/14 21:44:12

そうです。上手くできました！
親要素（li）を取得するのにparentを使うんですね。
凄く勉強になりました。ありがとうございます。

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

cuspos · Answer 1 · 2009-10-14T10:14:36+09:00

二重で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>

jQueryのクリック処理について相談です。

回答（1件）

cuspos49102009/10/14 10:14:36

コメント（3件)

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