jquery - クリックした場合、ネストされたdivをクリックした場合

Question

親をクリックした後に表示されるdivをクリックする方法がよくわかりません。わかる？

コードスニペットの例を次に示します。

$('.item').bind('click', function(e){
var showme = $(this).find(".itemcontrols");
$(showme).toggle();
}); 

$('#add').bind('click', function(e){
alert();
});     

<div class="item ui-state-default">
    <div class="itemcontrols" style="display: block;">
        <div id="add">add</div>
        <div id="full">full</div>
        <div id="del">del</div>
    </div>
</div>

.item{display:none;}

Answer 1

.itemcontrolの子にクラスを追加でき.itemcontrolsます。

<div class="item ui-state-default">
  <div class="itemcontrols">
    ...
    <div id="add" class="itemcontrol">add</div>
    ...
  </div>
</div>​

.itemcontrolそして、関数を使用してすべての要素の伝播を停止し.stopPropagation()ます。

$('.itemcontrols .itemcontrol').on('click', function(e) {
  e.stopPropagation();
});​

これとは別に.on、現在推奨されている方法であるイベントをバインドするために使用することをお勧めします。

$('.item').on('click', function(e) {
  $(".itemcontrols", this).toggle();
});

$('.itemcontrols .itemcontrol').on('click', function(evt) {
  evt.stopPropagation();
});​

ここでライブを見てください。