Jqueryのセレクタ範囲について

質問

お世話になります。

【Jquery】
$("#aaa").click(function(){
$(this).css("opacity","1");
});

【HTML】
<div id="aaa">
<p>hogehoge</p>
<p>hogehoge</p>
<input type="text" name="hoge">
</div>
<div id="aaa">
<p>hoge2hoge2</p>
<p>hoge2hoge2</p>
<input type="text" name="hoge2">
</div>

上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか？

$("#aaa").not(":input"）　としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。

反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。

何か良い方法がありましたらよろしくお願い致します。

※子要素であれば$(this)の下に「.find('input～）」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか？

回答No.1

anmochi · ベストアンサー

試した事ないんだけど、反応させたくないINPUTタグに対するセレクターのクリックイベントでバブリングというのを無効にすればいけるかもしれない。

$("#aaa").click(function(){
$(this).css("opacity","1");
});

$("input", $("#aaa")).click(function(){
// バブリングをキャンセルするコードをここに追加
}

余談ながら、可能ならばひとつのHTML中に複数の同じIDを持つエレメントを存在させない方が良いでしょう。