0

I'm currently applying toggleClass (to change colors) on each row of my table:

$('tr').click(function() {
    $(this).toggleClass('red-c blue-c');
});

This works great on my desktop - as soon as I click on a row, the color toggles. However, on mobile, when I tap on a row, the row stays selected and the color doesn't toggle immediately. It toggles only after I tap on a second row.

I tried using the "touch" and "touchstart" events. Still no luck. The issue I think is that when I tap on a row, it stays selected / highlighted. It's only when I click on a different row that it gets unselected and toggles color.

Rajesh Gowda
  • 33
  • 5
  • I think this is duplicate for [document .click function for touch device](http://stackoverflow.com/questions/11397028/document-click-function-for-touch-device) – Martin Hučko Jul 06 '16 at 19:54
  • I tried that but it doesn't seem to do the trick. – Rajesh Gowda Jul 06 '16 at 20:01
  • I tried using the "touch" event instead of "touchstart". Still no luck. The issue I think is that when I tap on a row, it stays selected / highlighted. It's only when I click on a different row that it gets unselected and toggles color. – Rajesh Gowda Jul 06 '16 at 20:06

1 Answers1

0

try adding the css style

cursor:pointer

to your

details

Community
  • 1
  • 1
stackoverfloweth
  • 6,669
  • 5
  • 38
  • 69