關於'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'事件

回答

相關問題