获取动态创建的元素的ID

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!

Answer 1

$(".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);
});

Answer 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?