jQuery td onclick location change - Destination continues to be 'undefined'

[sikuneh]

On my site I am working on a jQuery script that when you click anywhere in a td (not just on the link) it will take you to the link's destination, but whenever I click it always say it is undefined which always returns a false page.

jQuery:

$(document).ready(function() {
    $("table#colorNavTable tr td").click(mouseClick);
})
 
function mouseClick() {
    var url = $(this).next().attr("src");
    window.location = url;
    return false;
}

HTML:

<table width="100" id="colorNavTable" cellpadding="2" cellspacing="2">
    <tr>
        <td><a href="page2.html">Child 1</a></td>
    </tr><tr>
        <td><a href="page2.html">Child 2</a></td>
    </tr><tr>
        <td><a href="page2.html">Child 3</a></td>
    </tr><tr>
        <td><a href="page2.html">Child 4</a></td>
    </tr>
</table>

Here is a link to a live site if you need it

The destination is the same for all of them for the test. It is supposed to link to this.

Thanks in advance.

 

[AngusThermopyle]

1. Why did you use next() ??
2. Why did you use attr("src")

I believe that neither are correct here.

 

[sikuneh]

Sorry, that was a copy error. It still doesn't work after I changed that.

1. Why did you use next() ??

I used next because the td tag (which I referenced with the $()) doesn't have an href attribute and if the user doesn't have javascript enabled I want them to still be able to use the links.

 

[AngusThermopyle]

next() gives the next sibling element, not the next element on the page.
The links are contained in the td elements, they are not siblings.
Sibling means that it has the same parent.
The parent of the td is the tr it is contained in.
The parent of the a is the td it is contained in.

 

[sikuneh]

That would explain a lot... but how would I get each the next a tag in the sequence?

 

[AngusThermopyle]

http://api.jquery.com/

You are looking for the child of the td elements.
You are also looking for the href attribute, not the src .

var url = $(this).children("a").attr("href");

Since the links are the only children, you do not have to use the "a" selector, but if your html changes, it might be necessary.

### caution: have not tested the above code...

 

[sikuneh]

I took a few tutorials and it never mentioned that. Thanks, it works now.