jquery click on tr id not resulting in expected results

Question

I have a php array:

 $users = array('Bob' => 'User',"Tom Smith'=>'Owner','Jack Mason' =>'User');

I am creating a table of these users:

<table align='center' width='100%' name='summary' id='summary'>

foreach ($users as $key => $value)
{
    echo "<tr><a href='#' id='" . $key . "' class='getDetail'>
                    <th>" . $key . "</th>
                        .....etc
}

and jquery

 $('#summary tr').click(function() {
 alert($(this).attr('id'));
 });

i would expect the alert to show the key of the array. The $key is definitely set because i see it in the "th" field.

when i click on any row in table i get "undefined" in my alert window. I am smacking my head against the wall as to why.....

`this` in your callback refers to the `` element, which makes perfect sence as that's where the listener's attached. The `id` attribute otoh is set in the `` tag, so you would need to find that element first (`$(this).find("a").attr("id");`). — nietonfir, Jan 06 '14 at 20:28

adeneo · Accepted Answer · 2014-01-06T20:08:25.250

1

Change the loop to valid HTML, and the event handler should work

<table align='center' width='100%' name='summary' id='summary'>

foreach ($users as $key => $value) {
  echo "<tr id='".$key."' class='getDetail'><th>".$key."</th>";
}

edited Jan 06 '14 at 20:08

answered Jan 06 '14 at 19:59

adeneo

312,895
29
395
388

option 2 works, option 1 doesn't. out of curiosity any thought as to why? – bart2puck Jan 06 '14 at 20:02
Try `$(this).find('a').prop('id')`, should be the same thing, and it seems like that would be the way to get it ? – adeneo Jan 06 '14 at 20:03
Note that an anchor isn't a valid child of a TR – adeneo Jan 06 '14 at 20:04
@bart2puck - Just did a quick test, and the anchor is moved out of the table in Chrome as it tries to fix the error with the anchor being in a place it shouldn't. You don't need an anchor to make it work with javascript, you can click anything. – adeneo Jan 06 '14 at 20:07
@adeneo Please read [this](http://stackoverflow.com/q/5874652/838733). `id` is an attribute and thus cannot be returned via `prop()`. The correct function is `attr()` in this case. – nietonfir Jan 06 '14 at 20:25
@nietonfir - Have you been drinking, `id` is both an attribute **and** a property, that's why you can do `element.id` and not `element.getAttribute('id')` in plain javascript. – adeneo Jan 06 '14 at 20:33
@adeneo I know. But most people don't know the difference between an attribute and a property so using the advised function will greatly reduce later problems down the road. – nietonfir Jan 06 '14 at 20:42
@nietonfir - so now you know, but you in your last comment you stated that `prop()` couldn't return the ID, while in fact `prop()` would be the more proper way to get the ID ? – adeneo Jan 06 '14 at 20:46
@adeneo Because I disagree. `prop()` should only be used for boolean properties (disabled, checked, readonly, etc.) or for dynamic attributes. As the id attribute doesn't fall into this definitions, you **shouldn't** (better? ;-) ) use `prop()` but `attr()` instead. – nietonfir Jan 06 '14 at 20:53
I agree that `attr()` should generally be used, but my original answers used `attr()` and it wasn't working for the OP so I suggested another approach, and then I changed the answer to just altering the PHP loop, so I'm not really sure what you're going on about, `prop()` works just fine with ID as it's a property of the native element, and that's the way it's always done in plain javascript, changing the property, not the attribute, so your initial comment was totally wrong, and now you're just arguing to argue. – adeneo Jan 06 '14 at 21:01

score 0 · Answer 2 · answered Jan 06 '14 at 20:03

0

Try:

$('#summary tr a').click(function() {
    alert($(this).attr('id'));
});

but your HTML is incorrect anyway, i think you should place A tag inside TH tag.

answered Jan 06 '14 at 20:03

Maciej Lew

626
6
5

jquery click on tr id not resulting in expected results

2 Answers2