Question

Im using jQuery/PHP/MySql to load twitter search results on the page but limited to the first 20 search results.

When the user scrolls the page and hits the bottom of the page a further 20 results are loaded and displayed.

I have implemented a voting system so the these particular tweets can be voted up and down.

However when the scrolled results are loaded this functionality stops working for the ajax loaded results but continues to work for the first 20 results.

Here is the jQuery that fetches the new results on scroll:

j(window).scroll(function(){
    if (j(window).scrollTop() == j(document).height() - j(window).height()){
        j.ajax({
            url: "older.php?oldest="+oldestName+"",
            cache: false,
            success: function(html){
                j(".older").html(html);
                j('.tweets ul li').removeClass( 'last_item' );
                j('.older ul > *').clone().hide().appendTo('.tweets ul').slideDown();
            }
        })
    }
}); 

And the jQuery that sets the voting up:

        $("a.vote_up").click(function(){
            //get the id
            the_id = $(this).attr('id');

            // show the spinner
            $(this).parent().html("<img src='images/spinner.gif'/>");

            //fadeout the vote-count 
            $("span#votes_count"+the_id).fadeOut("fast");

            //the main ajax request
            $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$(this).attr("id"),
            url: "vote.php",
                success: function(msg) {
                    $("span#votes_count"+the_id).html(msg);
                    //fadein the vote count
                    $("span#votes_count"+the_id).fadeIn();
                    //remove the spinner
                    $("span#vote_buttons"+the_id).remove();
                }
            });
        });

The HTML markup:

<li id='1283009589'>
<a class='imglink' target='_blank' href='link'>
<img src='link'alt='howtomoodle' title='howtomoodle' />
</a>
<a class='userlink' target='_blank' href='http://twitter.com/jim' alt='jim' title='jim'>jim</a>

Screenpresso - free screen capture software http://post.ly/uFxt  #moodle || 28-08-2010 16:33

<span class='votes_count' id='votes_count22361731118'>Votes:0</span>
<span class='vote_buttons' id='vote_buttons22361731118'>
<a href='javascript:;' class='vote_up' id='22361731118'></a>
<a href='javascript:;' class='vote_down' id='22361731118'></a>
</span>

</li>

Does anyone have any ideas why then the older results are loaded they do not allow the voteup and votedown buttons to be clicked, or atleast the .click event doesnt work.

Answer 1

A good alternative to using .live() is .delegate(), which is more efficient when placed on the parent container of your dynamic elements.

$('#theContainer').delegate("a.vote_up", "click", function() {
        //get the id
        the_id = $(this).attr('id');

        // show the spinner
        $(this).parent().html("<img src='images/spinner.gif'/>");

        //fadeout the vote-count 
        $("span#votes_count"+the_id).fadeOut("fast");

        //the main ajax request
        $.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "vote.php",
            success: function(msg) {
                $("span#votes_count"+the_id).html(msg);
                //fadein the vote count
                $("span#votes_count"+the_id).fadeIn();
                //remove the spinner
                $("span#vote_buttons"+the_id).remove();
            }
        });
    }
);

(Requires jQuery 1.4 or later.)