0

我正在使用一个使用 ajax 的无限滚动插件。

当通过 ajax 加载“下一页”时，下一页上的所有其他 ajax 相关脚本都不起作用。有人告诉我，我必须使用“委托事件”（即更改$(id).click()为$(document).on） - 问题是这意味着编辑多个插件并更改数十个函数调用。

有什么办法可以避免将所有内容更改$(document).on为无限滚动并做一些很酷的事情？？？？？？

我宁愿修改无限滚动插件，也不愿修改其他与 ajax 相关的插件以使其适合。

4

4 回答 4

4

不幸的是，您在这里几乎没有选择，而切换到委托事件是迄今为止最好的选择。

问题是您的旧代码将行为分配给“特定元素”，而它真正应该做的是创建对“某些类型的操作”的页面范围的响应。

我看到了 3 种可能性，其中只有一种可以保证有效。

  1. 每次加载新页面时运行新页面所需的任何脚本。这里的缺点是，除非您小心地在内容加载之间“拆除”，否则您的行为会重复或相互冲突（例如：双弹出窗口、损坏的动画）。
  2. 将动态区域封装在<iframe>s 中。根据您的架构，这可能会也可能不会，并且肯定不会很容易与某种已经期望特定页面结构的无限滚动插件集成。
  3. 咬紧牙关，修复糟糕的代码。
于 2013-09-15T01:34:41.387 回答
1

无论如何，在您的 ajax 加载内容中加载脚本是一种不好的开始方式。您需要event delegation将自身附加到任何动态添加的元素。

$("body").on("click", ".yourclass", function() {
    //This function will run for every element with `yourclass` class you load via ajax
});
于 2013-09-15T01:39:14.363 回答
0

如果您必须继续使用 .click() ，那么您必须有一个函数，您可以在每次向页面添加更多内容时调用新内容来重新挂钩事件。

e：虽然值得注意的是，从 .click 到 .on 的更改通常可以通过结构合理的查找/替换来处理

于 2013-09-15T01:33:28.687 回答
0

事件委托是正确的解决方案。问题是“下一页”上的 HTML 元素在页面加载时不是 DOM 的一部分。因此，如果您执行以下操作：

$(function() {
    $('#some-element-on-the-next-page').click(function() {
        foo();
    }); 
});

您的处理程序没有绑定。

我不会将事件附加到 $(document)。我会将它们附加到 DOM 加载时可用的最近的父级。例如，body 标记或作为 body 的第一个孩子的固定宽度包装器（假设您的布局使用这种类型的结构。）

确保您附加到的元素没有用 .empty() 清空或用 .html() 重新填充，因为这会破坏绑定。将委托处理程序附加到 DOM 树的较低位置将为您提供更好的性能，因为事件不必一直冒泡到文档节点来触发您的方法。

您不需要重写所有函数和插件，只需绑定到触发它们的事件即可。
我通常使用模块模式并将我的方法定义与点击处理程序分离。我所有的方法都在外部闭包中定义。我将有一个“文档准备就绪”部分，在其中绑定用户事件，如点击。

例如：

var myModule = (function() {

    var public = {};

    public.foo = function() {
        // do something cool here
    };


    // document ready
    $(function () {

        $('#site-container').on('click', '.js-foo', function() {
            public.foo();
         });

    });


    return public;   

})();

如果您将来需要更改绑定，您只需要更改文档就绪部分内的调用。

于 2013-09-15T02:02:05.480 回答