Question

I wrote the code to update the posts by using the ajax:

 $(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'>"+json.posts[i].shortmsg+"</div>";         
                output+="</li>";
            }
            output+="</ul>"
            $(output).appendTo('.posts');
    });
  });
});

My html code:

<div data-role="content" class="ui-content" role="main">
        <div class="posts"></div>
 </div>

Then I wanted to click each post, the post will expand to show more detailed content.How can I do that? The code I wrote was:

$(function(){
     $('.text').bind('click',function(){
         $.getJSON('getData.php', function(json){   
         var thisID = this.id;      
         $(this).replaceWith("<div class='long_text'>"+json.posts[thisID].msg+"<div>"); 
         });
     });
});

But it didn’t do anything.I was not sure if

var thisID = this.id;

worked or not. I changed my code a little bit:
$(function(){
$('.text').bind('click',function(){
alert("Hello!")
});
});

Still nothing happened!!I doubted if the .text was selected in the function.Anyone can help?Thanks!

Answer 1

You should read about jQuery’s .on()

Let’s say you have a container that exists before the dynamic content,

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

then you attach a handler once to the existing container, and it will listen to the dynamic content’s events 

//"add listener for .text, attached on .post"
$('.posts').on('click','.text', function(){
    //do stuff when text is clicked    
});