How to select table row elements inside a particular div with a given id

Question

I am trying to select all the <tr> elements inside a tbody and attach a click event by jquery but I just can not select the right elements.

This is my code:

    <div id="wrapper" cellpadding="0" cellspacing="0" border="0">
        <table>
          <tbody>
           <tr id="row_2">
           <tr id="row_3">
           <tr id="row_4">

...

and I tried to selct all the tr's like that:

 $('#wrapper tr').mousedown(function(event) {

and 

$('#wrapper > tr').mousedown(function(event) {

but it doesn't bind the click event at all.

Solution 1

Use .find() method. Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 $('#wrapper').find('tr')

Solution 2

It looks like invalid HTML. Use proper markup like this:

<div id="wrapper">
    <table>
        <tbody>
            <tr>
                <td>...</td>
            </tr>           
        </tbody>
    </table>
</div>

And now bind the click event.

$('#wrapper tr').mousedown(function(event) {
    //do something...
});

Comments

[techfoobar]

How is this different form $('#wrapper tr')?