如何使用MutationObserver更新DOMNodeInserted事件的处理？

Question

我有这样的代码：

function load_ui_globals() {
    $('legend').addClass('ui-widget-header ui-corner-all');
}

$(function(){
    load_ui_globals();
    $('#main').on('DOMNodeInserted', function() {load_ui_globals();});
});

它引发以下消息：

  

不建议使用突变事件。请改用MutationObserver。

在尝试更新代码时，我想到了这个（但它不起作用）：

function load_ui_globals() {
    $('legend').addClass('ui-widget-header ui-corner-all');
}

$(function(){
    load_ui_globals();

    var callback = function(mutationsList) {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList') {
                console.log('A child node has been added or removed.');
                load_ui_globals();
            }
        }
    };
    var targetNode = document.getElementById('main');
    var config = { childList: true };
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
});

新代码不会触发load_ui_globals()的重新加载。如何在保持原始功能的同时正确使用MutationObserver？

原始代码不是我的，因此我可能无法完全掌握它应该触发的内容，但是在我看来，它应该将load_ui_globals()指令应用于任何新加载的节点（通过AJAX）。