我的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（）方法一样，该技术使用事件委托来正常工作。