HTML: set onclick event handler in external script file before user clicks it?

I am removing inline JS from HTML files due to CSP in an existing project, so this old code:

<input value="Click here" type="submit" name="submitA" onclick="something();" />

Gets changed to this new code:

<input value="Click here" type="submit" name="submitA" id="submitA" /> ... <script type="text/javascript" src="theJS.js"></script> </body>

And theJS.js has:

$(document).ready(function () { $("#submitA").on("click", function (event) { something(); }); }

I use jQuery. The ID attribute is for this example only. The SCRIPT element is before the body end tag due to the existing project structure (can be changed, but I prefer minimum changes).

The problem/question: users can click on the submit button before the JS code runs and attaches the event handler to the button. How to prevent that?

Is it possible to delay page display until the ready() handler is executed? I found an idea to set the page (or at least the submit button) to read only and then change it to normal at the end of the document/ready() handler, but that requires many changes (in the pages and in the JS handler).