如何解决表格行中的冲突点击事件？

Question

I'm using jQuery to make HTML table rows expand on click. Clicking any other row will collapse previously opened rows (as desired).

HTML :

<table class="table table-hover">
    <tbody>
        <tr>
            <td>
                Click to expand
                <div class="details hidden" ><a href="#" class="collapse-row">Close</a></div>
            </td>
        </tr>
    </tbody>
</table>

JavaScript :

$('tr:not(a.collapse-row)').click(function(){
  console.log("Expand row");
  $('.details').addClass("hidden");
  $(this).find('.details').removeClass("hidden");
});    

$('.collapse-row').click(function(e){
  e.preventDefault();
  console.log("Collapse row");
  $('.details').addClass("hidden");
});

Demo : http://www.bootply.com/KGu1lDO9PS

However, I also need an additional link (or button) that collapses the row. Is there a way to resolve the conflicting click-events? I tried a :not selector (as seen in the demo) and also working with z-index — without success.

Answer 1

you need to use e.stopPropagation()

$('.collapse-row').click(function(e){
  e.preventDefault();
  e.stopPropagation();
  console.log("Collapse row");
  $('.details').addClass("hidden");
});

Answer 2

This should work:

$('tr').click(function() {
    // Expand clicked row
    $(this).find('.details').removeClass("hidden");
    // Hide all other rows
    $(this).siblings().find('.details').addClass("hidden");
})

$('.collapse-row').click(function(e){
    e.preventDefault();
    // Close to open row
    $(this).addClass("hidden");
})

http://www.bootply.com/KJV4AhxMRO