javascript - Fancytree:在 DOM 中可见的新 child (通过 LacyLoad 加载)之后的事件

Question

我将 fancytree 与 lazyLoad 结合使用。我正在寻找一个触发事件 AFTER 通过 lazyLoad 加载的新 child 在 DOM 中可用。

var fancytree_options = {
            extensions: ["glyph"],
            checkbox: false,
            glyph: glyph_opts,
            icon: false,
            autoCollapse: true,
            debugLevel: 0,
            source: {url: URL},
            init : function(event, data) {
                    // ONLY first time
            },
            loadChildren: function(event, data) {
                    // BEFOR Children loaded in DOM
            },
            createNode: function(event, data) {
                    // BEFOR Child visible in DOM
            }
}
$("#treeBlock").fancytree(fancytree_options);

我已经通读了可能的事件并尝试了其中的一些: https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeEvents

init:只会在树第一次在 DOM 中完全可见时触发。添加新的 child 后，事件不会再次触发。

loadChildren:在将新子项集成到 DOM 之前。

createNode:在 child 进入 DOM 之前

renderTitle:有了这个我就成功地编辑了标题。但此时标题(也可以是 HTML)在 DOM 中尚不可用。

我正在寻找一个事件，该事件将在树中有新 child 并且它们在 DOM 中可用后被激活。

我的用例:节点的标题由 HTML 组成，并且必须在元素上注册额外的点击(与 FancyTree 无关)

Answer 1

你似乎在寻找变异观察者。在您继续之前，这些是很好的读物:

• https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

    // Select the node that will be observed for mutations
    const targetNode = document.querySelector(someselector);
    
    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };
    
    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
                //Fire create/remove event if needed
                //You may need to take account of the previous number of children
            }
            else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
                //Fire update event if needed
            }
        }
    };
    
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
    
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
    
    // Later, you can stop observing
    observer.disconnect();

上面的代码监视突变并有可以处理这些突变的代码位置。您可以从您使用的函数/类进行扩展，并添加一些回调函数以在将附加到对象的变异观察器的相关位置执行。我承认这很重要，但您需要先完成这项工作，然后您才能在将来重用它。