javascript - 如何将 javascript 添加到 html 文档的头部以监听尚未添加到 DOM 的元素的点击？

Question

我正在使用第三方网络应用程序，它允许您将自己的代码放置在 HTML 页面的头部。文档的其余部分是自动生成的，因此我可以插入自定义代码的唯一位置是在将所有内容添加到 DOM 之前的头部。

我正在尝试将单击事件添加到将在 DOM 中加载的各种按钮。我希望浏览器窗口根据单击的按钮的 id 来调整大小。

我尝试过这样的事情:

    <script type="text/javascript">
window.onLoad=function(){
    document.getElementById("resize").onClick = window.resizeTo(250, 250);
    };
</script>

因为我希望如果我使用 onLoad 事件添加 onClick 事件，它将等到所有内容都加载完毕，并且不会收到空引用错误。我没有收到空引用错误，但 onClick 不起作用。

我也尝试使用 jQuery，因为我读过的一篇文章建议监听所有点击事件，然后检查触发该事件的元素的 id，但是我不确定我是否正确使用它。这是我第一次使用 jQuery。这也不起作用。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).click(function() {
        if(event.target.id == 'resize') {
            window.resizeTo(250,250);
        };
    };
</script>

真正的答案可能只是不可能，但我希望有一些我在网上找不到的解决方案。

总而言之，有没有办法根据在第三方 Web 应用程序内单击的元素的 id 来调整浏览器窗口的大小？在将元素添加到 DOM 之前，脚本必须位于文档的头部。

感谢您的帮助。

Answer 1

您可以将代码放在document.ready中，并将其委托(delegate)给将来可能添加的元素。请参阅http://api.jquery.com/on/了解更多详情。

 $(document).on("click", "selector of element added in future", function(){

 //execute your code
 });