Question

在页面中添加新的html字符串：

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

当文档中有child元素时，是否有事件让我知道？

我有一个函数，它返回一些字符串的html代码。当这个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转换为花哨的交互式小部件。

Answer 1

您可以尝试使用DOM Mutation Events，但它们仍然在浏览器中实现不一致。

Answer 2

如果我没有误解这个问题，你可以让它开始工作

document.getElementById('id').childNodes;

Answer 3

如果您可以使用jQuery，您可以编写自己的自定义事件，只要添加了新的html，就会调用您需要调用的函数：

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

当然，不仅仅是将html添加到元素中，您需要将其包装在触发自定义事件的函数中。然后你需要做的就是调用这个函数而不是自己设置innerHtml。

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

Answer 4

这样解决了我自己：

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 + '()"';
}

代码背后的想法是我为src标记的img属性指定了错误的url，图像触发了错误事件并调用了我的函数。很简单：）

将元素添加到文档中时的事件

4 个答案: