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 jQuery.min file:
1 Answers
Answers 1
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.
0 comments:
Post a Comment