jquery - 无法隐藏父div

Question

我有一个表格，在单元格中有一个div，当我点击该行时，它显示了一个div，它是第一个单元格div中的绝对定位的div（order-details） 。当我点击dismiss div时，我想再次隐藏父级（order-details）div。它不会隐藏它。

我也做了一个fiddle

<table> 
    <tr class="order-row"> 
     <td> 
      <div class="dummy-detail-position"> 
       <div class="order-details"> 
        <div class="dismiss">X</div> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr class="order-row"> 
     <td> 
      <div class="dummy-detail-position"> 
       <div class="order-details"> 
        <div class="dismiss">X</div> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr class="order-row"> 
     <td> 
      <div class="dummy-detail-position"> 
       <div class="order-details"> 
        <div class="dismiss">X</div> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

这是我的JS

<script> 
$(document).on('click','.order-row',function() { 
     var tr = $(this).closest('tr'); 
     $(this).find('.order-details').show(); 
}) 

$(document).on('click','.dismiss',function() { 
    alert($(this).parent().parent().html()); 
    $(this).parent().parent().find('.order-details').hide(); 

}); 
</script> 

Answer 1

这是因为事件传播的

$(document).on('click','.order-row',function() { 
    var tr = $(this).closest('tr'); 
    $(this).find('.order-details').show(); 
}) 

$(document).on('click','.dismiss',function(e) { 
    e.stopPropagation() 
    $(this).closest('.order-details').hide();  
}); 

演示：Fiddle

由于order-now是dismiss的祖先，在order-now处理程序将在dismiss处理之后被触发，这将再次显示order-details元素

演示：Fiddle