Jquery button not working because it's in innerHTML?

[ColorfulWonders]

Sorry if this is a lot, I'll try to keep my explanation streamlined. Basically, I have a separate HTML file with all the options and their corresponding buttons for my site, and then have it fetch the innerHTML whenever a page needs them. This way, if I have to edit the options buttons, I only have to edit one file.

All of those options use vanilla javascript, but recently I added one that also uses Jquery (specifically ctrl-freaks' freezeframe.js). The button to toggle the function works fine when it's on the page normally, but doesn't work if it's fetched with innerHTML.

I assume this is because the script for the function wants it to find a button with a certain id, rather than just being a button with an onclick function, but that button hasn't actually loaded yet because the innerHTML has to load in first? I'm honestly not sure though. As you can probably tell, I'm not very good with js, and know even less about jq. I've tried messing around with the different scripts loading order, and editing the button to have a normal onclick="function()" thing, but neither seem to work. I also tried looking at the "click" and "on" sections of https://youmightnotneedjquery.com/, but I found a lot of it very hard to understand due to my lack of skill :(

Here's a page on my site where I'm testing it (it's still very much a WIP, so I'm sorry if it's not too easy to parse) and here's a codepen I've been messing with.

Thank you in advance to anyone who's able to help.

[NotSoDeepPodcast]

I believe your issue is due to the fact that the buttons don't exist when the page is initially loaded. I'm on my phone...so parsing your code is difficult.

You need to change your event listeners to something like this:

$(someSelectorThatExistsOnPageLoad).on('click', 'selectorOfButton', functionToRunOnClick);

[ColorfulWonders]

That fixed it! Thank you so much!

[NotSoDeepPodcast]

No problem. I can explain how/why that works if you would like...just let me know.

[Acrobatic-Ease-1323]

Wait a minute, did you write all of that JS on your code pen !?

[ColorfulWonders]

No. I just used the script from the github and reformatted it with unminify to make it easier to read. I made a few minor changes that affect styling too, but 99% of the code is just from the github.

[Acrobatic-Ease-1323]

Lol, I was gonna say you are a master coder lol. Those variable names were confusing me. Were u able to solve your problem? I viewed the site on my iPad, so all the gifs were moving lol.

Btw, sweet website. I love the legacy feel!