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

回答(1件)

id:cuspos No.1

cuspos回答回数49ベストアンサー獲得回数102009/10/14 10:14:36

ポイント80pt

二重で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>
id:kt26

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

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


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

2009/10/14 15:38:07
  • id:cuspos
    ソースの中に文字コード指定入れ忘れました。UTF-8です。
  • id:cuspos
    こんなイメージですか?

    >|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>
    ||<
  • id:kt26
    そうです。上手くできました!
    親要素(li)を取得するのにparentを使うんですね。
    凄く勉強になりました。ありがとうございます。

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

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

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

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