动态加载的jQuery脚本标记在加载事件后无法识别单击事件

Question

您好，我在一个动态加载和使用jQuery的SAP环境中使用了它。

脚本标记的onload事件起作用时，我可以选择焦点元素的文本。但是在那之后(我应该可以使用jQuery)，我不能注册像“点击”或“焦点”这样的jQuery事件。

是脚本的加载顺序有误，还是我必须在脚本标签上使用另一个事件，比如"complete"？

提前感谢！

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:此按钮定义HTML按钮

​

​

Answer 1

在DOM加载之后创建的元素，这段代码(例如$("button").on("click", function () {...}) )不会触发。

相反，您可以使用$("body").on("click", "button", function() {...})

简单地说，$("button")不起作用，因为在dom加载之后添加的元素上不存在"new button“。但是$("body")总是在那里，所以你可以找到任何在主体中的按钮元素。