如何將javascript添加到html文檔的開頭，以偵聽對尚未添加到DOM中的元素的單擊？

Question

我正在使用第三方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之前，腳本必須位於文檔的開頭。

謝謝您的幫助。

Answer 1

您可以將代碼放入document.ready ，並將其委托給將來可能添加的元素。 有關更多詳細信息，請參見http://api.jquery.com/on/ 。

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

 //execute your code
 });

Answer 2

使用jQuery可以有一個委托事件

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

它也適用於動態創建的對象。

相對於

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

僅適用於原始DOM元素。