Dynamically loaded jQuery script tag dont recognize click events after load event

Question

Hi i used this in a SAP WebDynpro environment to load and use jQuery dynamically.

The onload event of script tag works, i can select the text of the focused element. But after that (where i should be able to use jQuery) i cant register jQuery events like "click" or "focus".

Did the script get loaded in the wrong order or do i have to use another event on script tag like "complete"?

Thanks in advance!

var HtmlContainerCustom = HtmlContainerCustom || {
    custom: function () {

        (function() {
            // Load the script
            var script = document.createElement("SCRIPT");
            script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
            script.type = 'text/javascript';
            script.id = 'JQ_ID';

            script.onload = () => {
                var $ = window.jQuery;
                
                // This will work
                document.activeElement.select();

                // !!! This wont work on button click
                $("body").on("click", ".btn", function() {
                    alert("clicked");
                });

            };

            var el = document.getElementById('JQ_ID');
            if (el){ el.remove();}

            document.getElementsByTagName("head")[0].appendChild(script);

        })();

    }
};

Edit: This one defines the HTML Button

Answer 1

Elements created after DOM has loaded, this code for example $("button").on("click", function () {...}) won't trigger.

Instead, you can use $("body").on("click", "button", function() {...})

For saying it in a simple way, $("button") doesn't work because the "new button" does not exist on elements added after dom has loaded. But $("body") is always there, so you can find any element of button that it's inside the body.