javascript - 使用 AJAX、Javascript/jQuery、DOM 和 Facebook Like 按钮进行无限滚动

标签 javascript jquery ajax facebook dom

我正准备在我的产品页面上实现类似 Twitter 的无限滚动。也就是说,当我跨越某些滚动阈值时,使用 AJAX 加载其他页面部分。但我不确定标题中的主题在加载后会受到怎样的影响。我的问题如下:

  1. 对于使用 AJAX 加载的每批新元素,DOM 会针对这些新元素进行更新还是完全更新?旧 DOM 会发生什么?

  2. 我是否能够在这些新的 DOM 元素上使用 Javascript 和 jQuery,就像我在页面开始时使用的 DOM 一样?我想这与第一个问题有关。

  3. 对于每次加载,我将加载 9 个新产品。每个产品都有一个使用 FB Open Graph API 的 FB Like 按钮。新产品的 Like 元素是否会经历与我开始时的 DOM 元素相同的异步修改,以便可以进行正确的 Like 提交?

最佳答案

让我们一一开始。

  1. 按照您的意图,DOM 应该只更新,而不应该更新。那里 不是旧的 DOM,因为您所做的是在它们上插入新元素。

  2. 是的,您可以做到这一点。但要小心事件 听众,因为如果你开始错误,你将不得不附加新的 再次监听这些新节点的事件。例如:

    $('body').on('click','a.addToCart',function(){})//将匹配当前和 future 的节点 $('a.addToCart').on('click',function(){});//只匹配当前节点

  3. 是的,您需要对每个按钮再次执行相同的过程。

额外提示:如果您关心移动环境,则应该通过删除不需要的节点来尽可能保持 DOM 干净。

关于javascript - 使用 AJAX、Javascript/jQuery、DOM 和 Facebook Like 按钮进行无限滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14062191/

相关文章:

java - Controller 方法不是使用 IP 而是使用 localhost 调用

javascript - 根据key和values将对象修改为单独的对象

jquery - 如何使 jQuery Sticky Float 插件对页面更改做出实时 react ?

javascript - 将数据复制到 JQGrid

javascript - Javascript promise 中的错误处理

jquery - 内容完全加载时显示 Ajax 内容

javascript - Chrome.storage.sync - 会保留他们的数据吗?

javascript - React 切换类 + CSS 转换,不起作用……为什么?

javascript - 使用在线优化器合并多个 javascript 文件后最后使用哪个名称?

asp.net-mvc - 将对象 AJAX 发布到 MVC Controller 会导致所有属性均为 null