Question

I am having this function in jQuery where I’m getting new posts with AJAX and PHP. And then creating a new div and appending the post to it.

Here is my code:

function getMorePosts(latestPost){

    $.ajax({
        type: "POST",
        url: "/includes/classes/handler.php?do=getMorePosts",
        data: "&latestPost="+latestPost,
        cache: false,
        success: function(data){
            if(data){
                $('#addUpdate textarea').val('');
                $('<div id="newPosts"></div>').insertAfter('.myDeskAdd');
                $(data).prependTo('#newPosts');
            }
        }
    });
    return false;
}

Now, data is all of HTML code from my handler.php. Everything works, it’s appending and I can see the result on the screen. And it’s correct – nice!

But here is my problem:
When it’s added to the screen, it’s like I cant ‘use’ the DOM elements. For example: I have an image which I can click, and then it has to call an alert from jQuery, but it’s not. And all other jQuery effects bound to the dom elements created doesn’t work.

Those elements not working DOES work if I press F5.

I have tried html(), prepend(), append() and so on.

Answer 1

for all dynamic content (loaded from ajax), bind methods using jQuery on. Then it should work

instead of this,

 $(".imageClass").click(function(){
    alert($(this).html());    
 });

Use this

 $(".yourContainerDiv").on("click", ".imageClass", function(event){
     alert($(this).html());    
 });

http://api.jquery.com/on/