jQuery: issue with clickable rows

Question

I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.

This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.

Is there a way I can prevent that the row click event is triggered when I click on a button in that row ? I only want the event to fire by click on the row background but not by click on any button within a row.

Many thanks for any help with this, Tim.

share your javascript first please.

Suman Bogati
– Suman Bogati

2014-02-23 11:33:31 +00:00
Commented Feb 23, 2014 at 11:33 — Suman Bogati
– Suman Bogati, Commented Feb 23, 2014 at 11:33

Derek · Accepted Answer · 2014-02-23 11:44:07Z

1

At the top of your click event handler, put the following:

if ($(event.target).prop('type').toLowerCase() !== 'table' ||
    ! $(event.target).hasClass('myClass')) {
    event.stopImmediatePropagation();
    return;
}

What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).

If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:

if ($(event.target).prop('type').toLowerCase() === 'button') {
    event.stopImmediatePropagation();
    return;
}

This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.

edited Feb 23, 2014 at 11:44

answered Feb 23, 2014 at 11:36

Derek

4,7613 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2571510 Over a year ago

I decided to use this one. Thanks a lot for the great explanation.

Collectives™ on Stack Overflow

jQuery: issue with clickable rows

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related