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:

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. — Victor Levin, Feb 26 '16 at 20:46
@VictorLevin Edited question with images of error as much as I can provide on the error. You can see it pointing to `.stopPropagation` — Solomon Closson, Feb 26 '16 at 21:09
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. — A. Wolff, Feb 29 '16 at 13:21
***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 — A. Wolff, Feb 29 '16 at 13:27
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! — Solomon Closson, Feb 29 '16 at 21:04
Would like to remove Bounty I had on this question, if possible? — Solomon Closson, Feb 29 '16 at 21:05

score 1 · Answer 1 · answered Feb 26 '16 at 20:51

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.

answered Feb 26 '16 at 20:51

Eric Guan

15,474
8
50
61

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. – Solomon Closson Feb 26 '16 at 21:00
2

@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 [mcve] I can't really give you a better example though. – Feb 29 '16 at 06:17
There is a native DOM method called closest too: https://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 – A. Wolff Feb 29 '16 at 13:11
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 – Solomon Closson Mar 07 '16 at 07:43
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. – Solomon Closson Mar 07 '16 at 07:44

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

1 Answers1