我的ajax / jquery函數不適用於在分頁內容中動態加載的

Question

我記得曾經有過這個問題，但是我不知道它在哪個項目上或如何解決。

我有一個ajax“添加到收藏夾”按鈕，還有無限滾動，當您到達頁面底部時，ajax會加載頁面。 問題是ajax不適用於新添加的內容

// Favorites
  $('.res-list .star').click(function(){
    var starLink = $(this);
    var listItem = $(this).parent().parent();

    if ($(starLink).hasClass('starred')) {
       $(starLink).removeClass('starred');
     } else {
       $(starLink).addClass('starred');
     }
     $.ajax({
       url: '/favorites/?id=' + $(starLink).attr('data-id'),
       type: 'PUT',
       success: function() {

         if ($(starLink).hasClass('starred')) {
           $(listItem).animate({
             backgroundColor: '#FFF8E4'
           }, 400);
         } else {
           $(listItem).animate({
             backgroundColor: '#ffffff'
           }, 400);
         }
       }
     });
     return false;
  });

Answer 1

您需要現場活動

$('.res-list').on('click', '.star', function() {

   // code here
});

或使用委托（）

$('.res-list').delegate('.star', 'click', function() {

       // code here
    });

了解有關proxy（）的信息

閱讀有關on（）

Answer 2

.bind（）方法會將事件處理程序附加到所有匹配的錨點上！ 這是不好的。 隱式地遍歷所有這些項以附加事件處理程序不僅昂貴，而且由於一遍又一遍是同一事件處理程序，因此也是浪費的。

.delegate（）方法的行為與.live（）方法類似，但是除了將選擇器/事件信息附加到文檔之外，您還可以選擇其錨定位置。 就像.live（）方法一樣，該技術使用事件委托來正常工作。