Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clicking anywhere on any page of site causes jquery .apply error, why?

I have a few e.stopPropagation() events going on to prevent clicks from bubbling up for certain elements. But now it seems that everytime I click on anything, besides those elements, on these pages, I am getting this error in the console:

Uncaught TypeError: ((m.event.special[e.origType] || (intermediate value)).handle || e.handler).apply is not a function

I am pretty sure it has to do with the stopPropagation() handler here, but how do I fix this exactly, I need the stopPropagation() function on these elements in order for these functions to properly work on the frontend.

Here is the js code I'm using currently:

var mainMenu = $(".menuMain");

if (mainMenu.length) {
    var clonedMain = mainMenu.clone(true, true),
        baseLogo = clonedMain.find('.logoMenu').find('.base-logo'),
        scrollLogo = clonedMain.find('.logoMenu').find('.scroll-logo');

    clonedMain.addClass('scroll-menu').addClass('hidden');
    baseLogo.addClass('hidden');
    scrollLogo.removeClass('hidden');
}

// Bootstrap Menu Dropdowns:
$('ul.menu-bootstrap-menu').on('click', '.dropdown-menu', function(event) {
    event.preventDefault(); 
    event.stopPropagation(); 
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
});

$('.dropdown').on('click', '.dropdown-toggle', function(e) {
    e.stopPropagation();

   var $this = $(this);
   var $li = $this.closest('li.dropdown');

   $li.siblings().removeClass('open');
   $li.siblings().find('a').removeClass('dropdown-overlay').children('.caret-arrow').hide();
   if ($li.hasClass('open'))
   {
        $li.removeClass('open');
        $this.removeClass('dropdown-overlay').children('.caret-arrow').hide();
   }
   else
   {
        // Remove Sticky Nav search, if exists!
        if ($('.search-scroll').length)
            clonedMain.find('.menu-bootstrap-menu > li.search a').trigger('click');

       $li.addClass('open');
       $this.addClass('dropdown-overlay').children('.caret-arrow').show();
   }
});

$(document).on('click', function(e) {

    $('li.dropdown').removeClass('open');
    $('li.dropdown a.dropdown-toggle').removeClass('dropdown-overlay').children('.caret-arrow').hide();

    var eventtarget = e.target;

    // If clicking anywhere outside of sticky nav search bar!
    if ($('.search-scroll').length)
    {
        var navtargets = eventtarget.closest('li.menu-item.search'),
            objsearch = $(eventtarget);

        if (!navtargets && !objsearch.hasClass('search-input'))
            clonedMain.find('.menu-bootstrap-menu > li.search a').trigger('click');
    }

    // If clicking anywhere outside of sub navs!
    if ($('.nav-body').length)
    {
        var navbody = eventtarget.closest('.nav-body');

        if (!navbody && $('.nav-body').is(':visible'))
            $('.nav-body').slideToggle('fast');
    }
});

Basically, what is happening here, for the main menu, I need it to stay active/visible until clicked off of anywhere on the document. There is also a submenu on a few pages of the site, which also needs to stay open until clicked anywhere outside the menu. All of this is working fine and as expected. The only issue I am seeing is the error popping up in the console, which is beginning to erk me to death as it keeps incrementing each time I click on any of the elements other than ul.menu-bootstrap-menu .dropdown-menu and .dropdown .dropdown-toggle. All of this code is wrapped in a document.ready function call.

Any ideas how/why this is happening?

I am using jQuery v1.11.3

Below are images about error, if it helps:

Error in Console: Error in Console

Error in jQuery.min file: Error in jQuery.min file

like image 325
Solomon Closson Avatar asked Feb 26 '16 20:02

Solomon Closson


1 Answers

Problem here i think

var eventtarget = e.target;

    // If clicking anywhere outside of sticky nav search bar!
    if ($('.search-scroll').length)
    {
        var navtargets = eventtarget.closest('li.menu-item.search'),
            objsearch = $(eventtarget);

and here

// If clicking anywhere outside of sub navs!
    if ($('.nav-body').length)
    {
        var navbody = eventtarget.closest('.nav-body');

You're calling jquery function closest on a non-jquery object eventtarget.

like image 103
Eric Guan Avatar answered Sep 18 '22 16:09

Eric Guan