使用Ajax时jQuery的奇怪问题

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

我使用jQuery / PHP / MySql在页面上加载Twitter搜索结果,但仅限于前20个搜索结果。

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

当用户滚动页面并点击页面底部时,将加载并显示另外20个结果。

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.

但是,当加载滚动结果时,此功能将停止为加载ajax的结果工作,但继续适用于前20个结果。

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

这是在滚动上获取新结果的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();
            }
        })
    }
});

And the jQuery that sets the voting up:

以及设置投票的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();
                }
            });
        });

The HTML markup:

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>

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.

有没有人有任何想法为什么然后加载旧的结果他们不允许点击投票和投票按钮,或至少.click事件不起作用。

2 个解决方案

#1

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

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

(Requires jQuery 1.4 or later.)

(需要jQuery 1.4或更高版本。)

#2

thats because the "click" event for "a.vote" is binded once, at a SITE load. When you're loading the new content (next 20 results) they $(document).ready is not called. Have a look at $.live method http://api.jquery.com/live/ which is exactly what you need :)

这是因为“a.vote”的“点击”事件在SITE加载时被绑定一次。当您加载新内容(接下来的20个结果)时,他们不会调用$(document).ready。看看$ .live方法http://api.jquery.com/live/这正是你需要的:)

#1