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

Question

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:

Erbil

Can you provide more details about the error? Like the error stack. What jQuery version are you using? I don't see anything obviously wrong with your code and stopPropagation shouldn't cause an error like that... Something else is going on. – Eden

@VictorLevin Edited question with images of error as much as I can provide on the error. You can see it pointing to .stopPropagation – Erbil

If you remove the stopPropagation() call, the error is gone??? I ask it because nothing in your posted code would explain it, neither your posted image regarding error. You can see it pointing to .stopPropagation How that? It more looks like issue with dispatching event, maybe caused in your code by .trigger('click'). At least for debugging purpose, don't use a jq minified version. – Gupta

EDIT: i see than inside click events, you are trigering other click event. You should avoid it, quite hard to debug, giving heaches. You should maybe just fire the handler: .triggerHandler('click') which won't make event to propagate anyway. That's said, it is impossible to debug this kind of issue without getting an MCVE to play with. And if you are able to provide MCVE, i guess this would point you to the current issue, letting you fixing it yourself – Gupta

Ok, sorry guys, I found the problem, was a Chrome Extension I had installed interferring with all clicks on the page for some reason, causing error. I determined this once I switched to non-minified version of jQuery, and determined that something was still loading the minified version somewhere, but not on my website. disabled a few Chrome Extensions and worked like a charm with no errors! – Erbil

Would like to remove Bounty I had on this question, if possible? – Erbil

Answer 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.

Sibella

If I turn it into a jquery object it doesn't work for navtargets and navbody, for example, if I do this: var eventtarget = $(e.target); I get error on that and it does not work as expected. – Erbil

@Solomon Eric is correct, you are calling a jQuery method on a native DOM object. To fix the odd behavior you're talking about you need to change !navtargets and !navbody in your conditional statements to !navtargets.length and !navbody.length respectively. All of this would be obvious if you used console.log() on your variables. But really, your whole script seems like an odd way of going about it. Without a proper minimal reproducible example I can't really give you a better example though. – Tiepolo

There is a native DOM method called closest too: developer.mozilla.org/en-US/docs/Web/API/Element/closest Only IE doesn't support it. That's said, just looks like OP wants indeed the jq object&method – Gupta

Problem was related to a Chrome extension, this does not cause errors using .closest on the eventtarget variable in the way that I am using it. Not sure what errors you folks are referring to, but once I removed Chrome Extension, problem went away. This was due to Chrome Extension, because the jQuery minified version was even pointing to the jQuery that was related to a Chrome Extension, not the jQuery related to my website. This was happening on all webpages that I clicked on, even on other websites, due to the Chrome Extension. This Bounty should be removed as it was done prematurely – Erbil

But it seems that I am being forced to accept an answer on this Bounty even though I have asked for the Bounty to be removed and flagged the question. – Erbil