CODEWITHSUNDEEP
javascriptjqueryhtml
vkapadia
vkapadia

Reputation: 330

Click Button not click through to Table Row

I have a table with which I've implemented an accordion effect. One of the cells has a <button>. If I click the button, the button's onclick happens, but the table row also takes the click (which expands/collapses the accordion). How do I prevent the click from going through the button to the table row?

This is my click function:

$("#accordiontable tr.accordion-parent").click(function () {
    $(this).nextUntil(".accordion-parent").toggle();
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e");
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s");
});

And one of the cells has a <button onclick="DoCommand()"> in it.

Upvotes: 1

Views: 1742

Answers (3)

MichaelG
MichaelG

Reputation: 737

Add e.stopPropagation(); to your first click handler.

$("#accordiontable tr.accordion-parent").click(function (e) {
    e.stopPropagation();
    $(this).nextUntil(".accordion-parent").toggle();
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e");
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s");
});

Upvotes: 0

vkapadia
vkapadia

Reputation: 330

I wasn't able to get e.stopPropagation to work, it still expanded/collapsed the row when I clicked the button. I figured there's got to be a way to see exactly what was clicked on. I found https://api.jquery.com/event.target/ and used it like this:

$("#accordiontable tr.accordion-parent").click(function (e) {
    var target = $(e.target);
    if (!target.is("button")) {
        $(this).nextUntil(".accordion-parent").toggle();
        $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e");
        $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s");
    }
});

Upvotes: 1

Matthew
Matthew

Reputation: 639

Call jQuery's event.stopPropagation() function.

https://api.jquery.com/event.stoppropagation/

$("#accordiontable tr.accordion-parent").click(function (e) {
    e.stopPropagation();
    $(this).nextUntil(".accordion-parent").toggle();
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e");
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s");
});

Upvotes: 3

Related Questions