FeatherLight Lightbox || Mobile Toggle Class Issues

Question

I'm having a strange issue only on mobile. On click, toggle initially fires once, which is what I want when you first interact with either the hamburger menu or search icon.

Once a lightbox (FeatherLight) is opened then closed, the original hamburger/search is click toggle fires twice.

The mobile menu and search icon work fine initially. But when I interact with a FeatherLight then the toggling doesn't work right as it toggles classes twice. I have even added event.preventDefault(); into my click handler to no avail. Does anyone have any ideas?

Here's my JS calling the lightbox:

$( '.cards__inner a' ).featherlight( {
          targetAttr: 'href',
          afterContent: function() {
            $footer = $( 'section.lightbox-footer' );
            $footer.insertAfter( '.featherlight-content' );
          }
        } );

And my mobile nav:

var $headerMenu = $( '.header__menu' ),
    $navigation = $( '.navigation' ),
    $navigationOverlay = $( '.navigation__overlay' );

    $headerMenu.on( 'click', function() {
      event.stopPropagation();
      event.preventDefault();

      $( 'body' ).toggleClass( 'noscroll' );
      $navigation.toggleClass( 'open' );
      $navigationOverlay.toggleClass( 'open' );
      $( this ).toggleClass( 'open' );

      // mobile wonkieness
      height = $( window ).height();
      $navigation.height( height + 100 );
      $navigationOverlay.height( height + 100 );
    } );

     $navigationOverlay.on( 'click', function() {
      $( 'body' ).removeClass( 'noscroll' );

      $navigation.removeClass( 'open' );
      $navigationOverlay.removeClass( 'open' );
      $headerMenu.removeClass( 'open' );
    } );

    // Toggle search box
    var $searchForm = $( '#search-box' ),
        $searchLink = $( '.search-link' );

    $searchLink.on( 'click', function() {
      $searchForm.toggleClass( 'open' );
      $( this ).toggleClass( 'open' );
    } );

I've even looked at event.stopImmediatePropagation(); but I must be missing something simple. At least I hope so. Ive used this setup for awhile and only started having issues once FeatherLight was used.

Any thoughts?

You can see it online here: http://dose.encryptdesigns.com/

Thanks for the help!

Answer 1

First, you are not calling stopImmediatePropagation. That would alleviate the problem, but won't solve the issue that your binding code is currently executed when a featherlight is opened-then-closed. It looks like that code must be in $( 'section.lightbox-footer' ) somehow; insertAfter will execute the script tags of what's being inserted.