0

2 つの div があり、一方が他方の内部にあります。

<div id="parent">
    <div id="children">
        Click me
    </div>
</div>

</p>

jqueryを使用して子divをクリックすると、親もクリックされました。

$(function() {
   $("div").click(function(){
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

それを避けるにはどうすればよいですか？これが私のjsfiddleです：http://jsfiddle.net/gzpPB/1/

4

4 に答える 4

2

最も堅牢なソリューションは、クリックを受け入れるすべてのDIV要素に特定のクラスを与えることです。そうすれば、ネストされている場所や深さに関係なく、「button」クラスを持つ要素のみがトリガーされます。

新しいコード：

<div id="parent">
    <div id="children" class="button">
        Click me
    </div>
</div>


$(function() {
   $(".button").click(function(){
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

jQuery 1.8以降を使用している場合は、次のようにする必要があります。

$(function() {
       $(document).on('click', ".button", function(){
           alert("The id of the selected item is: " + $(this).attr("id"));
       });
    });​
于 2012-11-09T22:16:50.330 に答える
2

セレクターをより具体的にします。

$("#children") instead of $("div")
于 2012-11-09T21:19:20.327 に答える
0

ページの div 要素をターゲットにしているだけです。

e.target特定の div をターゲットにするために使用します。またe.stopPropagation()

$(function() {
       $("div").click(function(e){
           if( e.target.id == 'children'){
               e.stopPropagation();
               alert("The id of the selected item is: " + $(this).attr("id"));
           }
        });
    });

フィドルをチェック

于 2012-11-09T21:19:40.607 に答える
0

.stopPropagation()次のように使用します。

$(function() {
   $("div").click(function(e){
       e.stopPropagation();
       alert("The id of the selected item is: " + $(this).attr("id"));
   });
});​

jsFiddle の例

バブリングが原因で子 div をクリックすると、コードは両方の div に対してアラートを出します。jQuery は特定の div ではなくすべての div をターゲットにしているため、子をクリックすると親に移動し、再びアラートがトリガーされます。を使用するだけで、子 div のみをターゲットにすることができ$("#children")ます。ただし、バブリングを停止することもstopPropagation()できます。これにより、特定の div だけでなく、任意の div をクリックしたときにアラートが機能します。

于 2012-11-09T21:20:37.167 に答える