JQuery code execution timing changes, WP 6.7, Navigation Block

Before WP 6.7 I have a standard navigation block with an item with a sub menu.

I then had a group block with more content. I had some jquery that moved the group into the submenu so I could have a nice mega menu and you can see it here:

When WP 6.7 came out my Jquery would run but it seems the nav was not rendered yet so the group was being moved but the JS couldn’t find the dropdown menu, or any part of the menu.

The only fix I could use was to wrap the jquery with a setTimeout function set to run after 500ms or so.

Is there a best practise for enqueuing a script to run after the dom is created in WP 6.7? This is my working code. I didn’t need the setTimeout function before WP 6.7.

 setTimeout(function () {
// Find the parent div with class .c-mega-menu and its child ul with class .wp-block-woocommerce-product-categories
var container = $('.c-mega-menu .wp-block-woocommerce-product-categories');

// Find the link with rel="shop"
var $link = $("a[rel='shop']");

// Find the parent <li> element
var $li = $link.closest("li");
$($li).addClass('js-mega-menu-container');
// Find the <ul> element within the parent <li>
var $ul = $li.find("ul");

// Find the <li> element within the <ul>
var $liToRemove = $ul.find("li");

// Remove the content from the <li>
$liToRemove.empty();

// Find the div with class "c-mega-menu" from elsewhere in the DOM
var $megaMenu = $(".c-mega-menu");

// Append the megaMenu to the parent <li>
$liToRemove.append($megaMenu);

// Define a recursive function to add classes to li elements
function addClassesToLi(li) {
  // Find the first a tag within the current li
  var firstAnchor = li.find('a:first');

  // Check if a first a tag was found
  if (firstAnchor.length > 0) {
    // Get the text content of the first a tag
    var spanText = firstAnchor.text().trim();

    // Add the spanText as a class to the current li
    li.addClass(spanText);
  }

  // Recursively process child li elements
  li.find('li').each(function () {
    addClassesToLi($(this));
  });
}



// Start the process with top-level li elements
container.find('li').each(function () {
  addClassesToLi($(this));
});


  function updateLeftPosition() {
    var viewportWidth = $(window).width();

    // Check if the viewport width is greater than or equal to 1120px
    if (viewportWidth >= 1120) {
      var $shopLink = $('a[rel="shop"]');
      var $megaMenuContainer = $('.js-mega-menu-container > ul');
      var leftDistance = $shopLink.offset().left;

      // Calculate the left position based on the distance from the left edge of the screen
      $megaMenuContainer.css('left', -leftDistance + 'px');
    } else {
        var $megaMenuContainer = $('.js-mega-menu-container > ul');
        $megaMenuContainer.css('left','0px');
    }
  }

  // Initial calculation
  updateLeftPosition();

  // Update the left position when the screen width changes
  $(window).on('resize', function() {
    updateLeftPosition();
  });
   }, 500); // Adjust the delay if needed

• This topic was modified 1 year, 6 months ago by mikednz.
• This topic was modified 1 year, 6 months ago by James Huff. Reason: redundant link removed

The page I need help with: [log in to see the link]