Question

I use the following code to open external pages within a div on the current page:

$(document).ready(function(){
     $("#content").load("content.html");
});

(function($) {  
$(function() {  
$('.load_link').click(function() {  
     $("#content").load($(this).attr('href'));  
     var $row = $(this).closest("tr");
     $row.removeClass("rownotselected").addClass("rowselected");
     $row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
     return false;  
 }); 

Then for the actual link:

<a href="content2.html" class="load_link">Link text</a>

The links are displayed in a table and I like to be able to make the whole row clickable to open the link rather than just the text. Previosuly I only had one page to load so I hard coded the page name in the function and just opened it whenever the row was clicked with the following code:

<tr class="rownotselected load_link" style="cursor:pointer;">

However now there are multiple rows that need to be clickable which point to different pages, so I need to be able to pass the href value to the function via the above method in the same way as I do for a regular link. Is this possible?

I hope I’ve made the question clear, please do let me know if not.

Thanks in advance for any help!

Answer 1

How about this, using the has selector:

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

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

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

See the API:

• has selector
• event.preventDefault
• find