Sunday, March 20, 2011

Making Table Row Clicks Fire Hyperlinks in jQuery

I have a table of 5 rows and 3 columns. The first column has a hyperlink in it with a target=_new. I want things such that when I click any column in the same row, it fires that hyperlink and a new window opens up via the target=_new. Is this possible in Javascript or jQuery? I found I was able to access the href, at least, by doing this:

$('#search-results TD').click(function() {
  var s = $(this).siblings(':first-child').contents().attr('href');
  alert(s);
});

Note that simply adding hyperlinks on the other table columns besides col 1 is not desirable because I want a click in that row (even not on top of the hyperlink) to fire that hyperlink.

Note also that window.open might be disabled in some browsers, but target=_new gets right on through.

From stackoverflow
  • You should be okay with window.open, because you're calling it in direct response to a click by the user (make sure you're calling it from the event handler or a function called by the event handler, not after a setTimeout or some such). That's usually an exception. You could call the click function on the link's element, but that's not guaranteed to work cross-browser.

    Other than that, I can't think of another way to do it other than the ones you've said are out.

    Volomike : Hey, you're right. This is surprising because I thought window.open would be disabled. Here's my code: window.open($(this).siblings(':first-child').contents('a').attr('href'));
    T.J. Crowder : Yeah, browsers are somewhat sophisticated with their pop-up blocking now. Pop-ups in direct response to a user's action are usually okay...

0 comments:

Post a Comment