CUSTOMS CSS/JS does not seem to work with new pages added with Custom Pages

Peter Lane Posted in Component Development 1 year ago

I have a button defined on my new page with an id of "butt1".
<p><button id="butt1">Go Back</button></p>

Under JS in the admin Customs CSS/JS page, I enter

$("#butt1").click(function(){
alert("The paragraph was clicked.");
});

The click does not work.
I enter JS

Replies
gb Peter Lane Replied 1 year ago

Thank you all. I have done and it works

Indonesian Arsalan Shah Replied 1 year ago

Please follow Rafael first method in custom js

German Michael Zülsdorff Replied 1 year ago

'm sorry Peter, you are right!
I'm so much used to working with my GreenByGreen theme which doesn't have this restriction at the admin backend that I forgot.

gb Peter Lane Replied 1 year ago

Thanks for the reminder, I had just remembered the function!

Interestingly though, when I put inline script on the button on the page, that script was stripped out on save. Indeed, when one puts in script tags, they are also stripped from the page (as they are here!). Obviously a security feature.

Breton Rafael [redcrested.net] Replied 1 year ago

Add $(document).ready(function () ... in your JS code should be make your button clickable

$(document).ready(function () {
    $("#butt1").click(function(){
       alert("The paragraph was clicked.");
    });
});

Or use the old way

<p><button id="butt1" onclick=" alert('The paragraph was clicked.');">Go Back</button></p>
German Michael Zülsdorff Replied 1 year ago

Yes.
Open your browser's developer console and you'll see that custom ccs/js is placing your script inside of the head section while your button code appears a lot of lines later.
In other words: You're trying to address an element that's still not there.
So why don't you put your script BELOW the button code on your custom page?