selecting the id of a child element of a dynamically created link

Question

I am trying to select the id of a <li> element that is being created under another dynamic element, an <a> tag. I cannot seem to get a handle on the id of <li>. The closest I've got is this:

 $("a li:first-child").attr('id');

but will only give the id of the first li, not the one that is being clicked.

Here is the script, which I have truncated, because the only the first part is important:

$.each(...
    $("#inventoryDiv").append("<ul id='invList'></ul>");                                                
    $("#invList").append("<a href='javascript:void(0);' name='invLink'><li id='" + this.inventory_id + "'>
...

and my listener is:

$("#inventoryDiv").on('click','a',function(){
    console.log($("a li:first-child").attr('id');
}

Any thoughts?

invalid HTML - `LI`'s must be the child of the `UL` - you can't have an anchor as a child of the `UL` Read the Usage context here [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) — wirey00, Aug 23 '13 at 14:52

score 3 · Accepted Answer · edited Aug 23 '13 at 14:56

3

$("#inventoryDiv").on('click','a',function(){
    console.log($(this).find('li').attr('id'));
});

edited Aug 23 '13 at 14:56

Richard Dalton

35,513
6
73
91

answered Aug 23 '13 at 14:51

Tushar Gupta - curioustushar

58,085
24
103
107

score 2 · Answer 2 · answered Aug 23 '13 at 14:56

2

first you need to switch the li and a tags around so your HTML will be valid

$("#invList").append("<li id='" + this.inventory_id + "'><a href='javascript:void(0);' name='invLink'>

then use .closest() to get the li's id

$("#inventoryDiv").on('click','a',function(){
    $(this).closest('li').prop('id');
});

Another issue you'll run into is that ALL your UL's are going to have the same ID - which is also invalid as ID's are supposed to be unique

answered Aug 23 '13 at 14:56

wirey00

33,517
7
54
65

The is only UL on the page – Rob M Aug 23 '13 at 15:01
@RobM but it's inside an each loop? – wirey00 Aug 23 '13 at 15:02
Yes it is, and although the page is working correctly, your comments have made me notice that there are a few more empty ul on the page. Since they were empty, I didn't notice, until I looked at the page in chrome dev tools. Thanks for the spot, and although, it isn't effecting the page RIGHT now, it could in the future. – Rob M Aug 23 '13 at 15:05
@RobM yeah it will - :) The each loop must be there for a reason - as there could probably be more than one - also if you have a few empty `ul`'s you probably have extra anchor tags inside the first ul because all the anchors are getting appended to the first UL only - unless that's the expected result then you should probably move the .append('
– wirey00 Aug 23 '13 at 15:08
Thanks again, and good spot. I have moved that out of the loop. – Rob M Aug 23 '13 at 15:12

score 1 · Answer 3 · answered Aug 23 '13 at 14:54

1

Try this:

$("#inventoryDiv").on('click','a',function(){
    console.log($(this).find('li').prop('id'));
});

http://api.jquery.com/prop/

answered Aug 23 '13 at 14:54

Tricky12

6,752
1
27
35

I still haven't been able to figure out when I should use `attr` or `prop`. – Rob M Aug 23 '13 at 14:56
Take a look through this older question/comments. It has a lot of useful information about the addition of `.prop()` with jQuery 1.6 vs. `.attr()`. http://stackoverflow.com/questions/5874652/prop-vs-attr – Tricky12 Aug 23 '13 at 15:07

selecting the id of a child element of a dynamically created link

3 Answers3