Question

I have an HTML table where the first cell of each row contains text and the second cell contains a link. Like so:

<table id="foo">
  <tr>
    <td>Some text</td>
    <td><a href="/path/to/file/"><img src="/path/to/image.jpg" /></a></td>
  </tr>
  ...
</table>

I have a hover effect on the first table cell and when a user clicks on the first cell I wanted to trigger the link in the next cell so I chained a click function sort of like this:

$('#foo tr td:first-child').hover(...).click(
  function() {
    $(this).next().children().click();
  }
);

This doesn’t work. I’ve tried a few different ways with no success. I realise that I could put the text and link in the same cell and may end up doing that, but this is a simplified version of how my page actually is and it would take a bit of work to reshuffle things.

What am I doing wrong?

Answer 1

Clicking a link programmatically won’t go to the href, only a native (user) click will, you can emulate it though, like this:

$('#foo tr td:first-child').hover(...).click(
  function() {
    window.location.href = $(this).next().children('a').attr('href');
  }
);

This sets the window.location.href to go to the destination URL.