External JS file's functions not loading after infinite scroll
Question
I am using gumroad.js on tumblr with infinite scroll
<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. But once the remaining buttons load on infinite scroll, they do not load with the js functionality.
The script is located in the page's <head>
Do I need to reload the file in every callback of the infinite scroll?: function(newElements) {
EDIT
I just noticed that the soundcloud player is also disappearing after infinite scroll. 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.
1 answers
solution1
1 ACCPTED 2014-06-19 06:04:20
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. I don't know much about Gumroad, but a quick search turned up
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. 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. I am not sure if you're using jQuery, but if so, it's the simplest way.
Using their demo as the model:
jQuery
$('.gumroad-button').each(function() {
$(this).replaceWith($(this).clone().children().remove().end());
});
Gumroad.init();
Vanilla 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
.remove() doesn't remove text nodes so only the 'icon' part of the button will be removed after cloning (optimal).
If you're using the vanilla javascript, you'll need to copy the text node ("Buy my product") after cloning it. 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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.