使用Ajax時jQuery的奇怪問題

我使用jQuery/PHP/MySql在頁面上加載twitter搜索結果，但僅限於前20個搜索結果。使用Ajax時jQuery的奇怪問題

當用戶滾動頁面並點擊頁面底部時，會加載並顯示另外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>

有沒有人有任何想法，爲什麼然後加載舊的結果，他們不允許投票和投票按鈕是C.舔，或至少.click事件不起作用。

來源

2010-08-28 CLiown

我認爲，服務器總是給前20個結果... 檢查服務器端代碼...... ，當舊的結果更新，然後附加到舊結果的點擊事件也消失... 所以，你需要實時功能來檢測新的結果，然後將單擊事件應用到他們... – 2010-08-28 16:24:00

一個很好的替代使用.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或更高版本。）

來源

2010-08-28 16:53:47 user113716

這是因爲「a.vote」的「點擊」事件綁定了一次，在站點負載。當您加載新內容時（下20個結果），它們不會調用$（document）.ready。看看.live $方法http://api.jquery.com/live/而這正是你所需要的:)

來源

2010-08-28 16:22:18 migajek

使用Ajax時jQuery的奇怪問題

回答

相關問題