javascript - 動的子コンテンツの MutationObserver

Question

私は、特に面倒なメガメニューのセットアップを使用して、Prestashop サイト プロジェクトに取り組んでいます。

MutationObserverは、カート オーバーレイが開いているときにメニューを押し戻すという非常に優れた機能を果たしますが、別の JavaScript ライブラリによってメニューが動的に取り込まれた場合の問題は、レスキューを超えて難読化さMutationObserverれているため、毎回ノードからリンク解除されます。ページの読み込み後に何かがカートに追加されると、すべてが正しく描画されなくなります。

はMutationObserver現在、メイン ページ コンテナ オブジェクト ( ) に直接リンクされていますcategory。

//  CREATE A MUTATION OBSERVER OBJECT TO MONITOR ANY STATE CHANGES ON THE JS NODE
    let observer = new MutationObserver(blockCartOpened);

    function blockCartOpened(mutationRecords) {
    //  PROCESS THE LIST OF MUTATION THAT HAVE OCCURED
        mutationRecords.forEach (function (mutation) {
        //  GET THE MUTATION TARGET AND SEE IF THE DISPLAY STYLE ATTRIBUTE IS SET OR NOT
        //  AND REACT ACCORDINGLY
            var target = $(mutation.target);
            if(target.hasClass("cart_block")) {
                if(target.css("display") == "block") {
                    $(".ets_mm_megamenu").css("z-index", "-1");
                } else {
                    $(".ets_mm_megamenu").css("z-index", "2");
                }
            }
            mutation.addedNodes.forEach(function(node) {
            //  Nothing to be here yet...
            });
        });
    }

//  SET THE TARGETNODE AS WELL AS THE SETTINGS FOR WHAT TO TRIGGER THE OBSERVER ON, IN THIS CASE
//  TRIGGER THE OBSERVER ON ANY CHANGES TO THE STYLE ATTRIBURES OF THE NODE
    var targetNodes = document.getElementById("category");
    var observerOptions = {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ["style"]
    }

//  SINCE THIS IS A CLASS, A EACH LOOP IS REQUIRED EVEN IF THERE IS ONLY ONE RESULT
    observer.observe(targetNodes, observerOptions);

親内に作成された子ノードの属性の変更を監視する方法はありますか、それとも単なる夢物語ですか?