Странная проблема с jQuery при использовании Ajax

Question

Я использую jQuery / PHP / MySql для загрузки результатов поиска в Твиттере на странице, но ограничен первыми 20 результатами поиска.

Когда пользователь прокручивает страницу и попадает в нижнюю часть страницы еще 20 результатовзагружены и отображены.

Я внедрил систему голосования, чтобы за эти конкретные твиты можно было голосовать «за» и «против».

Однако, когда прокручиваемые результаты загружены, эта функция перестает работать для загруженного ajaxрезультатов, но продолжает работать для первых 20 результатов.

Вот jQuery, который извлекает новые результаты при прокрутке:

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

И jQuery, который устанавливает голосование:

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

HTML-разметка:

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

У кого-нибудь есть идеи, почему тогда загружаются более старые результаты, они не позволяют нажимать кнопки голосования и голосования или по крайней мере событие .clickне работает.

Answer 1

, потому что событие «click» для «a.vote» связывается один раз при загрузке САЙТА.Когда вы загружаете новый контент (следующие 20 результатов), они $ (документ) .ready не вызывается.Взгляните на метод $ .live http://api.jquery.com/live/, который именно то, что вам нужно:)

Answer 2

Хорошей альтернативой использованию .live() является .delegate(), который более эффективен при размещении в родительском контейнере ваших динамических элементов.

$('#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();
            }
        });
    }
);

(Требуется jQuery 1.4 или более поздняя версия.)