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

【问题标题】：My ajax/jquery function doesnt apply to dynamically loaded in pagination content我的 ajax/jquery 函数不适用于动态加载的分页内容
【发布时间】：2012-05-13 16:42:56
【问题描述】：

我记得以前遇到过这个问题，但我不知道它在哪个项目上，也不知道我是如何解决的。

我有一个 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;
  });

【问题讨论】：

标签： javascript jquery ajax dom javascript-events

【解决方案1】：

您需要现场活动

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

   // code here
});

或使用委托()

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

       // code here
    });

read about delegate()

read about on()

【讨论】：

使用其中一种有什么好处吗？谢谢顺便说一句！
注意第二个和第一个类似，除了它将处理程序绑定到指定元素而不是文档根。

【解决方案2】：

.bind() 方法会将事件处理程序附加到所有匹配的锚点！这是不好的。隐式迭代所有这些项目以附加事件处理程序不仅代价高昂，而且由于它一遍又一遍地使用相同的事件处理程序，这也是一种浪费。

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

【讨论】：

感谢您的澄清 :)