Can't initialize script

[ghost]

The console reads on page load:
"Easy Toggle State is not used: there's no trigger to initialize."

I have attempted to follow the steps described in the examples here.

html:

<button type="button"
	class="example-checkbox"
	data-toggle-class="is-checked">
</button>

css:

.example-checkbox {
	display: inline-block;
	width: 1em;
	height: 1em;
	padding: 0;
	box-sizing: content-box;
	border: 2px solid darkgrey;
	outline: none;
	border-radius: .25em;
	background-color: white;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	transition: .15s ease-out;
}
.example-checkbox:hover,
.example-checkbox:focus {
}
.example-checkbox::before {
	display: block;
	opacity: 0;
	content: "✔";
	transition: opacity .15s ease-out;
}
.example-checkbox.is-checked::before {
	opacity: 1;
}

/* For internal label */
.example-checkbox-container {
	padding: 0;
	border: none;
	outline: none;
	background: none;
}

I have attempted all examples with the same result. easy-toggle-state never seems to initialize.
I have installed via npm, and have it linked at the end of my page.

The application in use is a single page application which dynamically loads html snippets from a cms backend. I'm assuming the issue here is that the rendered content is inserted into the DOM fractionally slower than the layout executes the easy-toggle-state script, and because the script is called only once at page load, it isn't responding to the changing content.

Any advice?

[Twikito]

I think you should wait for the content to be inserted into the DOM, and then call window.initEasyToggleState(); in a callback.

On another website, I used Easy Toggle State asynchronously this way:

(() => {
	// Load script ----------------------------------------------------------------------
	const loadScript = (url, callback) => {
		let script = document.createElement('script'),
			loaded = false;
		script.setAttribute('src', url);
		script.onreadystatechange = script.onload = function () {
			if (!loaded && callback) {
				callback();
				loaded = true;
			}
		};
		document.head.appendChild(script);
	}

	// Toggle state ---------------------------------------------------------------------
	const initToggleState = () => {
		loadScript(
			'https://rawgit.com/Twikito/easy-toggle-state/master/dist/easy-toggle-state.es6.min.js',
			() => {
				window.initEasyToggleState();
			}
		);
	}
	document.addEventListener('DOMContentLoaded', initToggleState);
})();

Hope this is helpful :)

[ghost]

@Twikito, that is very helpful actually. With a little bit of tweaking, I've been able to use this and get things working as expected.

Thanks.

[Twikito]

👍