JQuery Infinite Scroll 加载多个相同的 $(document).ready 事件，并多次触发它们

Question

我是 jquery 新手，希望这是一个简单的问题，但我已经没有想法了。

我正在使用 .net，并且有一个页面，其中包含一些自定义 jquery 函数，如下所示，用于跟踪用户。当页面首次加载时，这工作得很好。

问题来自无限滚动，我在其中发布到另一个页面并附加结果。如果我附加结果而不在该发布的页面上重新包含以下功能，则当我单击新附加的链接时，它永远不会触发该事件。但如果我再次包含这个完全相同的片段，它就会正常工作。除了页面上所有以前的链接现在都会触发额外的时间。

因此，如果我向下滚动 5 页数据，然后单击该页面上的第一个链接，它现在会触发 6 次!我添加的最新的仅触发一次。

我看到一些有关去抖动和节流的内容，但这似乎比这更简单 - 有没有办法只加载此函数一次并让它适用于附加数据？

$(document).ready(function () {

   $('a.FollowJQ').click(function () {

     var username = $(this).attr('data');

     $.post('/jquery/follow.aspx',{ user: username },

       function (data) {

          if (!data.error) {

           if (data.server == 'SendToLoginPage') { window.location = "/login.aspx" }

              else { $('a.FollowJQ:[data=' + username + ']').html(data.server); }  }

                    else { $('a.FollowJQ:[data=' + username + ']').html(data.server); }

                        }, 'json');
                });
        });

Answer 1

您需要使用 .on()(jQ 1.7 及以上版本)来委托(delegate)祖先元素作为监听器，而不是使用 .click()。绑定(bind)一次，任何“a.FollowJQ”都可以执行该函数。

$('#wrapper').on("click", "a.FollowJQ", function() { ..the function.. });

如果使用 jQuery 1.6.x，.delegate() 将执行相同的操作:

$('#wrapper').delegate("a.FollowJQ", "click", function() { ..the function.. });

在示例中，"#wrapper" 是 "a.FollowJQ" 元素的任何祖先元素，预计不会被任何其他 DOM 操作破坏。最接近的共同祖先将具有最好的性能。