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

您需要使用.click()（jQ 1.7以后）代替作为侦听器的祖先元素，而不是使用.on()。绑定一次，然后任何“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操作破坏。最接近的共同祖先将获得最佳表现。

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

1 个答案: