无限滚动后未加载外部JS文件功能答案

【问题标题】：External JS file's functions not loading after infinite scroll无限滚动后未加载外部JS文件功能
【发布时间】：2014-06-16 10:34:10
【问题描述】：

我在无限滚动的 tumblr 上使用 gumroad.js

<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>

这会在按钮点击时创建一个覆盖结帐（模式）窗口。对于前 15 个帖子，它加载得很好。但是一旦剩余的按钮在无限滚动上加载，它们就不会加载 js 功能。

脚本位于页面的<head>

是否需要在每次无限滚动回调中重新加载文件？：function(newElements) {

编辑

我刚刚注意到soundcloud播放器在无限滚动后也消失了。这些都是自定义类。它们在检查器中显示为类仍然完好无损，但 js 文件没有得到处理。

【问题讨论】：

AFAIK，每次向 DOM 添加新帖子时都需要调用 javascript。
所以每次填充新内容时都加载整个 js 文件？你如何在回调中做到这一点？
这很奇怪。我查看了文档，找不到追加/更新方法，所以我想您每次都必须调用 JS 文件。

标签： javascript jquery tumblr infinite-scroll

【解决方案1】：

已知无限滚动会导致脚本出现问题。是的，您可能需要在每次页面加载后在回调中重新初始化 Gumroad。我对 Gumroad 了解不多，但快速搜索出现了

Gumroad.init()

作为重新初始化代码的方法。

如果我错了，有人可以纠正我，但是将那行放在回调中应该可以工作！

编辑：

我们无法阻止 Gumroad.js 在每次运行 init() 后创建重复的按钮，所以我们只需要擦除所有按钮并让它们重新初始化。也无法取消附加点击处理程序，因此您需要克隆锚点以删除它们。在每次无限滚动回调之后，您需要运行此代码以将所有 gumroad 链接恢复正常，然后调用 Gumroad.init() 重新初始化。我不确定你是否使用 jQuery，但如果是，这是最简单的方法。

使用their demo作为模型：

jQuery

$('.gumroad-button').each(function() {
    $(this).replaceWith($(this).clone().children().remove().end()); 
});
Gumroad.init();

原版 javascript

for (var i = 0, a = document.getElementsByTagName("a"); i < a.length; i++) {
  if (a[i].className.indexOf("gumroad-button") > -1) {
    var clone = a[i].cloneNode();
    clone.appendChild(document.createTextNode(a[i].lastChild.nodeValue));
    a[i].parentNode.replaceChild(clone, a[i]);
  }
}
Gumroad.init();

备注

.end() 需要在选择要删除的子元素后重新引用克隆的元素
.remove() 不会删除文本节点，因此仅克隆后按钮的“图标”部分将被删除（最佳）。

如果您使用的是原版 javascript，则需要在克隆后复制文本节点（“购买我的产品”）。但不是使用 DOM Node.cloneNode 方法进行深度克隆（也克隆所有子元素）（通过将true 传递给.cloneNode(true) 来克隆锚点，然后删除不必要的子元素（即图标）就像jQuery方式一样，您可以只浅克隆锚点，然后将文本复制过来。

同样，我们需要克隆和替换锚链接元素以摆脱重复的点击处理程序，否则当您点击按钮时，它实际上会执行 Gumroad 覆盖模式两次。

【讨论】：

行得通！ - 对于新加载的内容。不幸的是，它会在 'function(newElements) {' 中创建现有（已加载）内容的副本
soundcloud html5 播放器也有同样的问题。有什么建议吗？
抱歉，我对 Gumroad 服务不是很熟悉，但您能澄清一下重复内容是什么意思吗？你的意思是它在每个页面加载后创建两个 Gumroad 按钮？
是的，当加载新页面时，它会在旧按钮之上创建另一个按钮。