Advanced Search

Making a table row clickable while preserving the function of additional links

/ Published in: jQuery
Save to your folder(s)
First: clicking on a table row forwards you to the URL given in the first As href attribute. ------ Second: clicking on a link inside the row triggers the default action **AND** a click event on the table row. This needs to be stopped, so the default action is replaced by our own and propagation to higher elements is stopped. ----- Nice to have: Hand cursor when hovering over a table row. CSS!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $('tr.msg').click(function() {
  2.   document.location = $(this).find('a.msg-link').attr('href');
  3. });
  4.  
  5. $('tr.msg a').click(function(e) {
  6.   e.stopPropagation();
  7.   e.preventDefault();
  8.   document.location = $(this).attr('href');
  9. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.