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
});

或使用delegate（）

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

       // code here
    });

read about delegate()

read about on()

Answer 2

.bind（）方法会将事件处理程序附加到匹配的所有锚点！这是不好的。隐藏迭代所有这些项以附加事件处理程序不仅昂贵，而且它也是浪费，因为它是一遍又一遍的相同事件处理程序。

.delegate（）方法的行为与.live（）方法类似，但不是将选择器/事件信息附加到文档，而是可以选择锚定的位置。就像.live（）方法一样，这种技术使用事件委托来正常工作。

我的ajax / jquery函数不适用于动态加载分页内容

2 个答案: