Question

我有一个表，在单元格中有一个div，当我点击该行时，它显示一个div，它是第一个单元格div内的绝对定位div（order-details）。当我点击dismiss 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元素< / p>

演示：Fiddle

Jquery - 无法隐藏父div

1 个答案: