jQueryでネスト構造の<li>がクリックされた時にそのidを取得する方法について

jQueryでネスト構造になっているリストがクリックされた時に、そのidを取得するプログラムを作っています。
第一階層は取得できるのですが、第二階層の<li>をクリックすると二重に処理が動いたり、親要素の値が取得されてしまったりしてうまく動きません。

jQueryでの取得方法を教えていただければと思います。

[HTML部分]
<ul id="sample">
<li class="parent" id="1-1">項目１−１
<ul class="children">
<li class="chaild" id="2-1"></i>項目２－１</li>
<li class="chaild" id="2-2">項目２－２</li>
<li class="chaild" id="2-3">項目２－３</li>
</ul>
</li>
<li class="parent" id="1-2">項目１−２</li>
</ul>

[jQuery部分]
<script type="text/javascript">
$(document).on('click', '.parent , . child', function (e) {
var id = $(this).attr("id");
alert(id);
});
</script>


onクリックのセレクタの指定をいろいろと試してみましたが、下記のような結果となりうまく動作しません。
('.parent , . child')
親は正しくidが取得できたが、子はすべて1-1となってしまい、正しく取得できない。

('li')
親は正しくidが取得できたが,子は2-1と取得できてから、もう一度1-1と取得され、２回処理が動いてしまっている。

('.parent')
親は正しくidが取得できたが、子は全て1-1と取得される。

('#sample>.parent li')
子要素は正しく取得できるが、親要素が取得できない。

No.1 ベストアンサー 回答者： yambejp 回答日時： 2016/09/26 21:22

クリックしたliだけつかみたいなら、e.stopPropagation()してバブリングを抑止してください

<script>
$(document).on('click', 'li', function (e) {
var id = $(this).prop("id");
console.log(id);
e.stopPropagation();
});
</script>

<ul id="sample">
<li class="parent" id="1-1">項目１－１
<ul class="children">
<li class="chaild" id="2-1">項目２－１</li>
<li class="chaild" id="2-2">項目２－２</li>
<li class="chaild" id="2-3">項目２－３</li>
</ul>
</li>
<li class="parent" id="1-2">項目１－２</li>
</ul>

[jQuery部分]

No.2 回答者： fujillin 回答日時： 2016/09/27 09:56

こんにちは。

すでに回答は出ていますが…

マウスイベントは伝播しますので、上位要素（祖先要素）であればそのイベントをとらえることが可能です。
ご質問の場合は、それを全てその要素がイベントの発生源として処理してしまっているのが原因かと思います。

例えば最も上位のdocumentレベルで監視する場合は、イベントの発生源のidを取得するというようにすれば重複はおきません。
　$(document).on("click", function(e){
　　if(e.target.nodeName == "LI")
　　　alert($(e.target).prop("id"));
　});
上記は、document内全てのLI要素が対象となりますが、範囲を限定したい場合（例えばsampleクラス内のみなどの場合）は、documentの代わりにその要素で監視すれば同様のことが可能になります。


ご提示のように、jQueryの構文でLI要素のイベントのみを取得するような場合には、イベントの発生源と取得要素が同じ場合にだけ処理するようにすることでも特定が可能だと思います。
　$(document).on("click", "li", function(e){
　　if(this == e.target)
　　　alert($(this).prop("id"));
　});


もちろん、イベントの伝搬を制御しても良いのですが、例えば、同じ仕組みで別のスクリプトを組み込んだ際に、うまく動作しなくなる可能性があることを理解した上で行ってください。
ついでながら、要素のidは数字で始まるのはNGだったような・・・（←曖昧な記憶ですが）