Question

$j('table#thisOne tr:gt(0)').hover(function () {
   if ($j(this).next().length != 0) {
     $j(this).find('td:not(:first-child)').css("background", "#f60").css("cursor", "pointer");
   }
}, function () {
   $j(this).find('td').css("background", "").css("cursor", "auto");
});

This code above works fine, i.e. hovering between row 2 to second last row, and second columns.

The following is handling click event for that table:

$j('body').delegate("#thisOne tr:gt(0)", 'click', function () { 
    //I want to do something if second column onward clicked, but not first column 
    //which is a checkbox for other handler.
});

If column 1 has checkbox, How can I distinguish clicking the checkbox and the entire row. Because I want to have different handler between column1 and the rest of the column.

TIA.

Answer 1

The easiest way to do this is to take advantage of stopPropagation. Basically, create your tr click handler, and then create a more specific one for your first column. Something like this:

$('tr').click(function() {
  // handler1
});

$('tr .col1').click(function(event) {
  // handler2
  event.stopPropagation(); // handler1 will not be called now
});