如何發送通過無限滾動加載的內容的AJAX請求？

我正在構建一個類似Twitter的簡單項目，但非常簡單:)用戶主頁（時間線）上有很多推文。所以每個推文都有最愛按鈕。當用戶點擊收藏按鈕時，它會向服務器發送AJAX請求以存儲偏好的推文。所以喜歡的按鈕出頭這樣的：如何發送通過無限滾動加載的內容的AJAX請求？

<a href="#" id="1"><i class="icon-star-empty"></i></a> 
<a href="#" id="2"><i class="icon-star"></i></a> 
<a href="#" id="3"><i class="icon-star-empty"></i></a> 
... 
...

我用下面的JavaScript發送Ajax請求：

$("i").on("click", function() { 

    if ($(this).hasClass("icon-star-empty")){ 
     ajaxURL = "/setFavorite" 
    } else{ 
     ajaxURL = "/removeFavorite" 
    } 

    var linkID = $(this).parent().prop("id"); 
    var obj = $(this); 

    $.ajax({ 
     url: ajaxURL, 
     type: "POST", 
     data: {quoteID : linkID}, 
     success: function() { 
      obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star"); 
     } 
    }); 
})

由於有很多的鳴叫，我設置Infinite Scroll Plugin。當我沒有設置無限滾動時，AJAX請求運行良好。但是，當我設置時，這些AJAX請求不適用於通過無限滾動加載的那些推文。我的意思是，當我點擊通過無限滾動加載的推文的最喜歡按鈕時，他們不會向服務器發送AJAX請求。但AJAX請求使用通過默認HTML而不是無限滾動加載的推文工作。

所以我的問題是我該如何解決這個問題？如何發送通過無限滾動加載的推文的AJAX請求？

在此先感謝。

來源

2012-08-28 Jack

不相關，HTML ID不應該以數字開頭 –

我使用了數字ID，當我沒有設置無限滾動時它工作得很好。所以我認爲問題不在於此。 – Jack

我說「不相關」，只是讓你知道他們可能工作，但不是有效的HTML http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute -in-html –

$('selector').on('event', callback)僅綁定處理選擇器時存在的元素的事件。但是，無限滾動代碼稍後會加載新元素，因此不會爲它們綁定事件。

將溶液使用委託：

$('selector').on('click', 'i', function() { 
    // do stuff 
});

selector需要是一個包含所有的（動態地添加）i元件父元素。

來源

2012-08-28 02:16:57 ThiefMaster

如何發送通過無限滾動加載的內容的AJAX請求？

回答

相關問題