Menu icon Foundation
Where do you put page-specific Javascript?

I have some typical pages such as home, contact, subscribe, etc. On the subscribe page, I have a field which must be initialized by Stripe's javascript library. I created a partial "form-subscribe.html" which has the <div id="stripe-card"> where the Stripe control will be put, and then I created the form-subscribe.js that finds the <div> using the selector #stripe-card - the Stripe library then constructs the input field.

Following other examples, I've modified config.yml to also include the form-subscribe.js code. 

Unfortunately, when any other page in the site loads, I get errors that state "The selector you specified (#stripe-card) applies to no DOM elements that are currently on the page." This makes perfect sense, but I cannot figure out where to put the Javascript code so that it only executes when the subscribe.html page loads.

I've tried putting code on the subscribe.html, but within the <script> tags, it seems that JQuery isn't available. 

Can anyone shed some light on where to put page-specific javascript that only gets executed when the specific page is loaded? And also, why can't I use a jQuery expression such as $('#stripe-card') right below a <script> tag on one of the pages.

Thank you.

zurb-template javascript jquery

I have some typical pages such as home, contact, subscribe, etc. On the subscribe page, I have a field which must be initialized by Stripe's javascript library. I created a partial "form-subscribe.html" which has the <div id="stripe-card"> where the Stripe control will be put, and then I created the form-subscribe.js that finds the <div> using the selector #stripe-card - the Stripe library then constructs the input field.

Following other examples, I've modified config.yml to also include the form-subscribe.js code. 

Unfortunately, when any other page in the site loads, I get errors that state "The selector you specified (#stripe-card) applies to no DOM elements that are currently on the page." This makes perfect sense, but I cannot figure out where to put the Javascript code so that it only executes when the subscribe.html page loads.

I've tried putting code on the subscribe.html, but within the <script> tags, it seems that JQuery isn't available. 

Can anyone shed some light on where to put page-specific javascript that only gets executed when the specific page is loaded? And also, why can't I use a jQuery expression such as $('#stripe-card') right below a <script> tag on one of the pages.

Thank you.