appended data from an AJAX result wont execute another jQuery function

Question

basically, im trying to create a facebook/twitter like news feed, where i display a minimum of 3 latest post only from the database.

on the bottom of the post, i have a clickable div for load more posts..

upon clicking the div, of course it displays the another 3 old posts and so on..

currently, i have 15 posts in my database, it is displayed as followed (id 15 as the recently added post)

id:15 - some posts - some comments
id:14 - some posts - some comments
id:13 - some posts - some comments

load more...

above will display the posts and the associated comments per posts.

<ul id="post">
    <?php while.. { ?>
    <li><?php echo id; ?> - <?php echo posts; ?> </li>
         <ul id="comments">
            <?php while .. {?>
            <li> <?php echo comments; ?> </li>
            <?php } //end while ?>
         </ul>
    <?php } //end of while?>
</ul>
<span last_id="<?php echo id?>"> Load More ... </span>

you can also see my <span> tag, which displays the last ID (13) of the result. which will then be handled by my jQuery below.

this the jQuery for the <span> tag, when this is clicked, it will get the last post id (13), and use that last ID value to get another set of 3 old post 12, 11, 10

$(function() {
    $('.loadmore').click(function () {
        var last_id = $(this).attr('last_id');
        $.ajax({
            type:"POST",
            url:"../portal/includes/get_posts.php",
            data: "last_id="+last_id,
            success: function(html) {
            $('#post').append(html);
        }
        });
    return false; 
    });
});

the fetched value will append to my <ul id="post"> resulting to this format

id:15 - some posts - some comments
id:14 - some posts - some comments
id:13 - some posts - some comments
id:12 - some posts - some comments
id:11 - some posts - some comments
id:10 - some posts - some comments

load more...

but when i click the load more... again, it wont query for another set of 3 old posts.

it appears, that my jQuery cannot recognize the appended.

how can i resolve this?

thanks.

$('.post')... is searching a class, did you try $('#post').append(html); — caramba, Oct 15 '13 at 15:41

Andy · Answer 1 · 2013-10-15T15:54:24.477

0

You should have a class on that span:

<span class="loadmore" data-last_id="<?php echo id?>">

Which, as has been pointed out should be used in jQuery like:

$(document).on('click', '.loadmore', function () {
  //
});

And $('.post').append(html); should be $('#post').append(html);

I would also consider changing the last-id attribute to a more friendly data attribute:

<span data-last_id="<?php echo id?>">

which would be picked up with jQuery:

var last_id = $(this).data('last_id');

edited Oct 15 '13 at 15:54

answered Oct 15 '13 at 15:43

Andy

61,948
13
68
95

hi Andy, yea, thanks for pointing my error. but the main issue im having is how to execute the same AJAX function from the appended data. – bobbyjones Oct 15 '13 at 15:45
I think you're missing a class on that `span` too... – Andy Oct 15 '13 at 15:54

score 0 · Accepted Answer · answered Oct 15 '13 at 15:48

0

There may be a problem with event, you need to use event binding, if you want to manipulate with ajax loaded content. So, change this:
$('.loadmore').click(function () {
to this:
$(document).on('click', '.loadmore', function () {

answered Oct 15 '13 at 15:48

Azamat

435
5
13

Thank you for this! id buy you a beer if i could! 'm glad you understood my post. i thought i was too vague – bobbyjones Oct 15 '13 at 15:55

appended data from an AJAX result wont execute another jQuery function

2 Answers2