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