无限滚动后无法加载外部JS文件的功能

Question

I am using gumroad.js on tumblr with infinite scroll 我在tumblr上使用gumroad.js无限滚动

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

This creates an overlay checkout (modal) window on button clicks. 这将在单击按钮时创建一个覆盖签出（模式）窗口。 For the first 15 posts it loads fine. 对于前15个帖子，它加载正常。 But once the remaining buttons load on infinite scroll, they do not load with the js functionality. 但是，一旦其余按钮加载到无限滚动上，它们就不会加载js功能。

The script is located in the page's <head> 脚本位于页面的<head>

Do I need to reload the file in every callback of the infinite scroll?: function(newElements) { 我是否需要在无限滚动的每个回调中重新加载文件？： function(newElements) {

EDIT 编辑

I just noticed that the soundcloud player is also disappearing after infinite scroll. 我只是注意到，在无限滚动之后，soundcloud播放器也消失了。 These are both custom classes. 这些都是自定义类。 They show up in the inspector as having the classes still in tact, but the js files are not getting processed. 它们在检查器中显示为类仍然完好无损，但是未处理js文件。

Answer 1

Infinite scroll has been known to cause problems with scripts. 已知无限滚动会导致脚本问题。 Yes, you'd probably need to reinitialize Gumroad in the callback after each page load. 是的，您可能需要在每次加载页面后在回调中重新初始化Gumroad。 I don't know much about Gumroad, but a quick search turned up 我对Gumroad不太了解，但是很快就找到了

Gumroad.init()

as a method to reinitialize the code. 作为重新初始化代码的一种方法。

Someone can correct me if I'm wrong, but putting that line in the callback should work! 如果我错了，有人可以纠正我，但是将这一行放在回调中应该可以！

EDIT: 编辑：

We can't prevent Gumroad.js from creating duplicate buttons after every run of the init() , so we'll just have to wipe all buttons and let them reinitialize. 我们不能阻止Gumroad.js在每次运行init()之后创建重复的按钮，因此我们只需要擦除所有按钮并让它们重新初始化即可。 There's also no way to unattach the click handlers, and therefore you'll need to clone the anchors to remove them. 也没有办法取消附加点击处理程序，因此您需要克隆锚点以将其删除。 After each infinite scroll callback, you'll want to run this code to set all gumroad links back to normal and then call Gumroad.init() to reinitialize. 在每个无限滚动回调之后，您将需要运行以下代码以将所有gumroad链接设置回正常状态，然后调用Gumroad.init()重新初始化。 I am not sure if you're using jQuery, but if so, it's the simplest way. 我不确定您是否使用jQuery，但如果是这样，这是最简单的方法。

Using their demo as the model: 使用他们的演示作为模型：

jQuery jQuery的

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

Vanilla javascript 香草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();

Notes 笔记

.end() is needed to refer back to the cloned element after selecting the child elements for removal 选择要删除的子元素后，需要.end()来引用克隆的元素
.remove() doesn't remove text nodes so only the 'icon' part of the button will be removed after cloning (optimal). .remove()不会删除文本节点，因此克隆后（最佳）仅删除按钮的“图标”部分。

If you're using the vanilla javascript, you'll need to copy the text node ("Buy my product") after cloning it. 如果您使用的是普通javascript，则需要在克隆后复制文本节点（“购买我的产品”）。 But instead of deep cloning (clone all child elements as well) using the DOM Node.cloneNode method (by passing in true to .cloneNode(true) to clone the anchor and then remove the unnecessary child elements (ie the icon) like the jQuery way, you can just shallow clone the anchor only and then copy the text over. 但是，而不是使用DOM Node.cloneNode方法（通过将true传递给.cloneNode(true)来克隆锚点，然后删除不必要的子元素（即图标））来进行深度克隆（也克隆所有子元素）这样，您可以只浅克隆锚，然后将文本复制过来。

Again, we need to clone and replace the anchor link element to get rid of the duplicate click handler, or else when you click on the button it will actually execute the Gumroad overlay modal twice. 同样，我们需要克隆并替换定位链接元素，以消除重复的单击处理程序，否则，当您单击按钮时，它将实际上执行两次Gumroad叠加模式。

无限滚动后无法加载外部JS文件的功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-06-19 06:04:20

无限滚动后无法加载外部JS文件的功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-06-19 06:04:20

解决方案1
1 已采纳 2014-06-19 06:04:20