Get the id of elements dynamically created

Question

I want to select the elements created dynamically using ajax by id, the code is:

$(function(){
   $('#loadFeed').bind('click',function(){ 
        $.getJSON('getData.php', function(json) {
            var output="<ul id='feedsList'>";

            for(var i=json.posts.length-1;i>=json.posts.length-31;i--){
                output+="<li class='post'>";
                output+="<div class='text' id='"+json.posts[i].id+"'>"+json.posts[i].shortmsg+"</div>";         
                output+="</li>";
            }
            output+="</ul>"
            $(output).appendTo('.posts');
    });
  });
});

The html codes:

<div class="posts">
    <!--dynamic content here-->
</div>

I tried to get the id using $(this).attr("id"):

$(".post").on("click",".text",function(){
      var this_id =$(this).attr("id");
      alert(this_id);
});

But it said undefined. How could I get the id correctly?Thanks!

Could you see "id" attribute on your page, via Firebug for example? — Alexey Ogarkov, May 18 '12 at 08:38
have you made sure that `json.posts[i].id` indeed contains something useful? — Andreas Wong, May 18 '12 at 08:39
@Alexey Yes. There was id attribute containing a number. I can see in Chrome — Yujun Wu, May 18 '12 at 08:49
May be you could try to use jQuery(".post .text").click(function...? — Alexey Ogarkov, May 18 '12 at 08:52

thecodeparadox · Accepted Answer · 2012-05-18T10:26:56.880

2

$(".post") should be $('div.post'), because you're creating li from ajax request with same class. As div.post is existing in your DOM and you're appending you list to it.

That is,

$("div.post").on("click","li.post div.text",function(){
      var this_id = this.id;
      alert(this_id);
});

edited May 18 '12 at 10:26

answered May 18 '12 at 08:43

thecodeparadox

86,271
21
138
164

1

You could make use of the DOM, and use `var this_id = this.id;` which is (marginally) faster, and avoids wrapping `this` needlessly in a jQuery object. – David Thomas May 18 '12 at 08:54
Actually when I changed to $(".posts").on("click",".text",function(){ var this_id =$(this).attr("id"); alert(this_id); }); It works! Anyway thx! – Yujun Wu May 18 '12 at 09:07
You're absolutely welcome, incidentally, in HTML 5 an `id` is allowed to start with a numeric character. Though there's no indication that the OP is using HTML 5. So it's a worthwhile warning regardless. – David Thomas May 18 '12 at 10:21

score 2 · Answer 2 · edited May 23 '17 at 12:04

2

Numbers are not valid ids. Ids need to start with letters.

You will need to use something like this:

output+="<div class='text' id='post_"+json.posts[i].id+"'>"+json.posts[i].shortmsg+"</div>";

Here'se the structure of a valid id: What are valid values for the id attribute in HTML?

edited May 23 '17 at 12:04

Community

1
1

answered May 18 '12 at 08:51

Mihai Stancu

15,848
2
33
51

Get the id of elements dynamically created

2 Answers2