关于'ElementHasChildren'事件

有一个我使用的网站有一个内置的用户窗体。用户表单包含多个下拉列表。在运行时（在'DOMContentLoaded'上），没有一个下拉列表包含任何数据。打开DDL时，我假设运行了一些Javascript来将列表加载到页面中。关于'ElementHasChildren'事件

元素：

<ul class='hidden' data-bind='template: { name: 'childTreeTemplate', foreach: Kids }' style='display:block;'></ul>

'开放' 后变成3个元素的列表：

<ul class='hidden' data-bind='template: { name: 'childTreeTemplate', foreach: Kids }' style='display:block;'> 
    <li class='treeItem'>...</li> 
    <li class='treeItem'>...</li> 
    <li class='treeItem'>...</li> 
</ul>

我可以建立一个事件来检测呢？

事情我已经尝试：当元件装入

document.getElementsByTagName('ul')[1].addEventListener('DOMContentLoaded', function() { 
    alert('Content Loaded') 
}); 

document.getElementsByTagName('ul')[1].addEventListener('onchange', function() { 
    alert('Changed') 
}); 

document.getElementsByTagName('ul')[1].addEventListener('onload', function() { 
    alert('Loaded') 
});

这些事件中无触发（我可能误解了其使用）......

来源

2016-12-19 Sancarn

我想你不能改变userform的标记？该页面使用库Knockout，因此最可靠的选项是确保在**'ko.applyBindings（...）'调用后执行**代码。 –

如果你有可能改变标记然后看看：http://stackoverflow.com/questions/11893291/how-to-get-event-when-knockout-binding-is-done –

可悲的是无法改变标记，除非在加载网站之前有一种简单的方法来修改HTML？下面的突变观察者解决方案可以满足我的需求。我从来没有听说过Knockout，这就解释了为什么主要对象是“SEOko” – Sancarn

你可以使用一个MutationObserver：

MutationObserver为开发人员提供了对 DOM中的更改作出反应的方法。它被设计成替代DOM3 Events规范中定义的突变事件。

var target = document.getElementById('parent'); 
 

 
// create an observer instance 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.type==='childList') { 
 
    \t alert('added!'); 
 
     return false; 
 
    } 
 
    });  
 
}); 
 
    
 
// 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); 
 

 
document.getElementById('parent').appendChild(document.createElement('li'));

<ul id="parent" style='display:block;'> 
 

 
</ul>

演示：https://jsfiddle.net/q5nytv0L/

在我使用DOMNodeInserted过去，但它弃用：

document.getElementById('parent').addEventListener('DOMNodeInserted', function (event) {  
 
    if(event.target.parentNode.id == 'parent') { 
 
     alert('added!');   
 
    }; 
 
    
 
}, false); 
 

 

 
document.getElementById('parent').appendChild(document.createElement('li'));

<ul id="parent" style='display:block;'> 
 

 
</ul>

来源

2016-12-19 10:12:43

关于'ElementHasChildren'事件

回答

相关问题