Html div加载事件中动态添加的div元素 [英] Html div on load event for a dynamically added div element

问题描述

 < div id ='myDiv'onload ='fnName（） >< / DIV> 
  

无法使用

  window.onload = function（）{
 fnName（）; 
}; 
 
或
 
 $（document）.ready（function（）{fnName（）;}）; 
  

div元素是动态的。 div内容由xml xsl生成。

任何想法？

您可以使用 DOM突变观察者

每当dom发生变化时它都会通知您，例如当一个新的div插入到目标div或页面时。

我复制/粘贴实例代码

  //选择目标节点
 var target = document.querySelector（'＃some-id'）; 
 
 //创建观察者实例
 var observer = new MutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 console.log mutation.type）; 
}）; 
}）; 
 
 //配置观察者：
 var config = {attributes：true，childList：true，characterData：true} 
 
 //传入目标节点，以及观察者选项
 observer.observe（target，config）; 
 
 //稍后，您可以停止观察
 observer.disconnect（）; 
  

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.

Any ideas?

解决方案

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.

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();

这篇关于Html div加载事件中动态添加的div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！