Question

I have a table containing another table. It’s pretty ugly but it’s what I’m stuck with for now.

The inner table contains a series of rows, each of which contain a link. When one of the rows is clicked I open an external page within a DIV, based on the link contained within that row. I then apply a style to the row that was clicked, and remove that same style from other rows within the inner table.

Here is the code that does it:

(function($) {  
$(function() {  
$('tr:has(.load_link)') // select tr elements that have .load_link descendants

.click(function(e) {
    e.preventDefault();

    var link = $(this).find('a.load_link');

    $.address.value(link.attr('href'));

    $('#content').load(link.attr('href'));
    $(this).removeClass('rownotselected').addClass('rowselected')
           .siblings()
               .removeClass("rowselected").addClass("rownotselected");
               return false; 
});


});  
})(jQuery);

It works perfectly. The problem is if the mouse is clicked anywhere within the outer table, but NOT on one of the rows with the load_link class attached to it within the inner table, the whole outer table is given the class “rowselected”. Is there a way of stopping these clicks from triggering the class change and just limit it to the rows that should trigger it?

Thanks so much.

Answer 1

What about something like this?

$('table#innerTable tr:has(.load_link)').click(function(e) {
    /* snip */
});