With a button in a table row, how do I have separate on click events for the row versus the button click? I have on click events for both, but when I click the button, I get both events (because the button is in the row) and I only want one.
Do you have many cells in your table row? You may have to set your onClick per cell rather than per row. And leave the onClick off of the cell with the button.
There may be a way to wrap the columns in some sort of tag (maybe a span) and apply the onClick behaviour only once.
But adding it on the cell level rather than the row level should work.
OK, I can do that. There are about 10 cells and going into code view, I can copy and paste pretty quickly. But, just thought maybe there was some trick I should know about. Seems like a common enough requirement.
If anyone has any other ideas, please chime in.
Thanks!
I would try wrapping your ten cells inside a span tag and apply the onClick only once rather than ten times. Key is you need to isolate the button cell.
Can’t get a span or a div to work.
You use modifiers to change this behavior.
Here's a description of their use:
If I remember correctly, I recently had to do a similar setup. But, because tr is at a higher level that the button, tr’s click event goes through first, and then the button’s. Hence making the modifiers unusable for this use case.
So I ended up putting on-click on each td.
Use the stop modifier for the button in your table to only execute the action the button is expected to trigger.
The stop modifier prevents the event from bubbling up the dom.
2 Likes
Yep, that’s what I was looking for and works great! I’ve used preventDefault before, so makes sense. Thanks everyone!
Will have to try this again. I’m pretty sure it did not work last time I tried it.