Javascript 动态添加的 div 元素的 Html div 加载事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5026693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html div on load event for a dynamically added div element
提问by Harold Sota
How i can make some thing like this?
我怎么能做出这样的事情？
<div id='myDiv' onload='fnName()'></div>
can't use
不能用
window.onload = function () {
fnName();
};
or
$(document).ready(function () {fnName();});
the div element is dynamic. The div content is generated by xml xsl.
div 元素是动态的。div 内容由 xml xsl 生成。
Any ideas?
有任何想法吗？
回答by alexandru.topliceanu
You can use DOM Mutation Observers
It will notify you every time the dom changes, e.g. when a new div is inserted into the target div or page.
它会在每次 dom 更改时通知您，例如当一个新的 div 插入目标 div 或页面时。
I'm copy/pasting the exmple code
我正在复制/粘贴示例代码
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
observer.disconnect();
回答by Dan Beam
The onloadattribute probably wouldn't fire on the <div>if you're injecting it dynamically (as the document is likely already loaded, but maybe it'd still work...?). However you could either poll for the element by simply doing something like this (similar to YUI's onContentAvailable):
如果您动态注入该onload属性，则该属性可能不会触发<div>（因为文档可能已经加载，但也许它仍然可以工作......？）。但是，您可以通过简单地执行以下操作来轮询元素（类似于 YUI 的 onContentAvailable）：
// when the document has loaded, start polling
window.onload = function () {
(function () {
var a = document.getElementById('myDiv');
if (a) {
// do something with a, you found the div
}
else {
setTimeout(arguments.callee, 50); // call myself again in 50 msecs
}
}());
};
Or you could change the markup (I know nothing about XSL) to be something like this:
或者您可以将标记（我对 XSL 一无所知）更改为如下所示：
Earlier on in the page:
在页面的前面：
<script type="text/javascript">
function myDivInserted() {
// you're probably safe to use document.getElementById('myDiv') now
}
</script>
The markup you generate with XSL:
您使用 XSL 生成的标记：
<div id="myDiv"></div>
<script type="text/javascript">
myDivInserted();
</script>
It's a bit hacky but it should work.
这有点hacky，但它应该可以工作。
回答by Albireo
If you're not already using jQuery there's no reason to start using it just for this, you can write:
如果您还没有使用 jQuery，则没有理由为此开始使用它，您可以这样写：
window.onload = function () {
fnName();
};
回答by Neil Knight
You could use jQuery. The following code would be place in your <head>tags.
你可以使用jQuery。以下代码将放置在您的<head>标签中。
$(document).ready(function() {
// Your fnNamt function here
});
EDIT
编辑
Kobi makes a good point
Kobi 提出了一个很好的观点
You could also write $(document).ready(function(){fnNamt();});, or more simply, $(document).ready(fnNamt);, or even $(fnNamt)
你也可以写 $(document).ready(function(){fnNamt();}); ，或者更简单地说，$(document).ready(fnNamt);，甚至 $(fnNamt)
回答by evilcroco
Without jQuery with plain JS eg:
没有带有普通 JS 的 jQuery 例如：
<script type="text/javascript">
function bodyOnLoad() {
var div = document.getElementById('myDiv');
// something with myDiv
...
}
</script>
<body onload="bodyOnLoad()">
....
<div id='myDiv'></div>
....
</body>
回答by UltraInstinct
How about using jQuery/ready(..) for this?
为此使用 jQuery/ready(..) 怎么样？
Like here: http://api.jquery.com/ready#fn
像这里：http: //api.jquery.com/ready#fn
In the context of your question,
在你的问题的背景下，
$(document).ready(function () {fnNamt();});
回答by murthag11
I had the same Issue, and after searching I found this.
我有同样的问题，经过搜索我找到了这个。
In my case, the javascript appends the head of the index html to load a tab content html file, and onload I want to add that tab to the dom, display it and make other js stuff to change the tabs style.
在我的情况下，javascript 附加索引 html 的头部以加载选项卡内容 html 文件，并且 onload 我想将该选项卡添加到 dom，显示它并制作其他 js 内容以更改选项卡样式。
I added the line with .onload = function(event) {...}
我添加了一行 .onload = function(event) {...}
var link = document.createElement('link');
link.rel = 'import';
link.href = 'doc.html'
link.onload = function(event) {...};
link.onerror = function(event) {...};
document.head.appendChild(link);
This worked like a charm, and maybe it helps some other researcher :)
这就像一个魅力，也许它可以帮助其他一些研究人员:)
I found it on HTML5 Imports: Embedding an HTML File Inside Another HTML File
回答by Archinamon
I'd suggest circle-style func:
我建议使用圆形功能：
SwitchFUnc = false;
function FuncName(div_id) {
var doc = window!=null ? window.document : document;
var DivExists = doc.getElementById(div_id);
if (DivExists) {
//something...
SwitchFunc = true; //stop the circle
}
}
while (SwitchFunc!=true) {
FuncName('DivId');
}
回答by rass
I would suggest you to use jQuery.
Steps:
1. Download Jquery library from here http://code.jquery.com/jquery-1.5.min.js.
2. in your HTML, head section create a script tag and use this code below.
我建议你使用jQuery。
步骤：
1. 从这里下载 Jquery 库http://code.jquery.com/jquery-1.5.min.js。
2. 在您的 HTML 中，head 部分创建一个脚本标记并使用下面的代码。
$(document).ready(function() {
// write your code here..
});
$(document).ready(function() {
// 在这里写你的代码..
});
