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

Revision: 33483

at October 9, 2010 03:03 by theOtherOne

Updated Code

$('tr.msg').click(function() {
  document.location = $(this).find('a.msg-link').attr('href');
});

$('tr.msg a').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  document.location = $(this).attr('href');
});

Revision: 33482

at October 9, 2010 03:00 by theOtherOne

Initial Code

$('tr.msg').click(function() {
    document.location = $(this).find('a.msg-link').attr('href');
  });

  $('tr.msg a').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    document.location = $(this).attr('href');
  });

Initial URL

Initial Description

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!

Initial Title

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

Initial Tags

table

Initial Language

jQuery

Choose a language for easy browsing: