CODEWITHSUNDEEP
jqueryhtmlcss
vinylDeveloper
vinylDeveloper

Reputation: 707

Jquery - can't hide parent div

I have a table, that has a div in the cell, When I click on the row it shows a div that is a absolute positioned div(order-details) inside the first cell div. When I click on the dismiss div, I want to hide the parent (order-details) div again.. It won't hide it.

I've also made a 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>

This is my 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>

Upvotes: 0

Views: 782

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It is because of event propagation

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

Demo: Fiddle

Since order-now is an ancestor of dismiss, the order-now handler will get triggered after the dismiss handler, which will again display the order-details element

Demo: Fiddle

Upvotes: 4

Related Questions