document.addEventListener issues

sage
1

Hey guys!

Anyone else have issues with doing a simple:

		document.addEventListener("DOMContentLoaded", function() {
			alert('hi');
		});

Nothing happens… very strange I just have it in my custom route:

/* eslint-disable */

// import external dependencies
import 'StickyKit';
import 'Isotope';
import Barba from 'barba';
import TweenMax from 'TweenMax';
import TimelineMax from 'TimelineMax';
import ScrollMagic from 'ScrollMagic';
import 'animation.gsap';
//import 'debug.addIndicators'; 

export default {
	init() {

		document.addEventListener("DOMContentLoaded", function() {
			alert('sdfsd');
		});

	},
	finalize() {
	// JavaScript to be fired on all pages, after page specific JS is fired
	
	},
};

Am I missing some obvious thing about Sage?

1 Like
2

Seems like it should be working fine. Have you tried with jquery?:

// ...
$().ready(() => {...})
// ...

I honestly rarely attach functions to the ready event these days but for what I recall I had no problems at all with it

3

Sage calls the route code already on the jQuery document.ready event so it might be interfering there. See this: https://stackoverflow.com/questions/15275587/domcontentloaded-inside-document-ready

You might want to put that code outside of the routes/main call.

4

ah ha! don’t know how I missed that, I try to use as much vanilla JS as I can and I was loosing my mind trying to see what was the issue with the DomContentLoaded.

Thanks man!

1 Like