如何将javascript添加到html文档的头部以侦听尚未添加到DOM的元素的单击?

How can I add javascript to the head of an html document to listen for a click on an element not yet added to the DOM?

本文关键字：添加 DOM 单击 元素 头部 javascript html 文档      更新时间：2023-09-26

我使用的是一个第三方web应用程序，它允许你将自己的代码放在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之前位于文档的头部。

谢谢你的帮助。

您可以将代码放在document.ready中，并将其委托给将来可能添加的元素。详见http://api.jquery.com/on/

 $(document).on("click", "selector of element added in future", function(){
 //execute your code
 });

使用jQuery你可以有一个委托事件

$(document).on("click", "<selector>", function(){}));

也适用于动态创建的对象。

与

相对
$("<selector>").on("click", fucntion(){});

相关文章：