事件添加元素插入文檔

添加新的HTML字符串轉換頁面時：事件添加元素插入文檔

document.getElementById('container').innerHTML = '<div id="child"></div>';

有沒有讓我知道什麼時候child元素是文檔中的事件？

我有一個函數，它返回一些html codeas一個字符串。當這個html將被添加到文檔中時，我需要執行javascript函數。我試圖使用內嵌onload事件

document.getElementById('container').innerHTML = '<div id="child" onload="console.log(\'ready!\');"></div>';

但它似乎並沒有工作。

更新： 也許，我應該提供有關情況的更多細節。我有一個庫函數

myLibrary.getHtml()

在舊版本中，用戶只需要調用這個函數，並將結果添加到文檔中：

document.getElementById('container').innerHTML = myLibrary.getHtml();

在新版本中，結果不是一個普通的HTML。現在，用戶可以在將文件附加到文檔後與其進行交互。所以在將html附加到文檔後，我需要瀏覽結果DOM並附加事件處理程序，隱藏一些元素和其他內容。這就是爲什麼，我需要知道他們什麼時候將它添加到文檔中並執行一個javascript函數，該函數將純html變成了一個奇特的交互式小部件。

來源

2011-10-03 Andrey M.

難道你不能在設置innerHTML後立即調用函數嗎？ – nnnnnn

不，代碼是庫和用戶調用庫函數並通過innerHTML屬性追加結果。我無法改變用戶與圖書館互動的方式。 –

由我自己解決了這個辦法：

myLibrary.getHtml = function() { 
    var html; 
    ... 
    var funcName = 'initWidget' + ((Math.random() * 100000) | 0); 
    var self = this; 
    window[funcName] = function() { self._initWidget(); }; 
    return html + '<img src="fake-proto://img" onerror="' + funcName + '()"'; 
}

的代碼背後的想法是，我指定不正確的URL爲img標籤的src屬性和圖片觸發錯誤事件，並調用我的功能。非常簡單:)

來源

2011-10-04 03:50:59

如果我沒有理解錯誤的問題，你也許可以得到這個工作

document.getElementById('id').childNodes;

來源

2011-10-03 10:46:40 Chief

你可以嘗試使用DOM Mutation Events，但他們仍然不一致跨瀏覽器實現的。

來源

2011-10-03 10:50:54 unclenorton

如果你可以使用jQuery，你可以寫這會叫你需要調用每當新的HTML已被添加功能自定義的事件：

$('#container').bind('changeHtml', function(e) { 
    // Execute the function you need 
});

當然，相反的只是添加HTML對於元素，您需要將其封裝在觸發自定義事件的函數中。然後，所有你需要做的就是調用這個函數，而不是自己設置innerHtml。

function addHtml(html) { 
    $('#container').innerHTML = html; 
    $('#container').trigger('changeHtml'); 
}

來源

2011-10-03 10:55:14 codefrenzy

哦 - 對不起，只是閱讀你的評論...如果你不能改變人們如何追加HTML，那麼顯然這不會工作... – codefrenzy

事件添加元素插入文檔

回答

相關問題