事件添加元素插入文档

添加新的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

事件添加元素插入文档

回答

相关问题