Jquery - 无法隐藏父div

Question

我有一个表格，单元格中有一个 div，当我单击该行时，它显示一个 div，它是第一个单元格 div 内的绝对定位 div(订单详细信息)。当我点击关闭 div 时，我想再次隐藏父(订单详细信息)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