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();
});​

看到它住在这里。