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

时间:2014-06-19 14:08:44

标签: javascript jquery html dom

我正在使用第三方网络应用,您可以将自己的代码放在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>

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

总结一下,有没有办法根据在第三方网络应用程序中点击的元素的ID来调整浏览器窗口的大小?在将元素添加到DOM之前,脚本必须位于文档的头部。

感谢您的帮助。

2 个答案:

答案 0 :(得分:4)

您可以将代码放在document.ready中,并将其委托给将来可能添加的元素。有关详细信息,请参阅http://api.jquery.com/on/

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

 //execute your code
 });

答案 1 :(得分:0)

使用jQuery,您可以拥有委派的事件

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

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

而不是

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

仅适用于原始DOM元素。