2016-02-26 2 views
8

Ich habe ein paar e.stopPropagation() Ereignisse, die verhindern, dass Klicks für bestimmte Elemente sprudeln. Aber jetzt scheint es, dass jedes Mal wenn ich auf etwas klicken, neben diesen Elementen auf diesen Seiten, erhalte ich diesen Fehler in der Konsole:Wenn Sie auf eine beliebige Seite der Website klicken, wird jquery.apply als Fehler angezeigt. Warum?

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

Ich bin ziemlich sicher, dass es mit dem stopPropagation() Handler zu tun hat hier , aber wie behebe ich das genau, brauche ich die stopPropagation() Funktion für diese Elemente, damit diese Funktionen am Frontend funktionieren.

Hier ist die js Code, den ich zur Zeit bin mit:

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'); 
    } 
}); 

Im Grunde, was für das Hauptmenü hier geschieht, ich brauche es aktiv/sichtbar zu bleiben, bis weg von einer beliebigen Stelle auf dem Dokument geklickt . Es gibt auch ein Untermenü auf einigen Seiten der Website, das auch geöffnet bleiben muss, bis irgendwo außerhalb des Menüs geklickt wird. All das funktioniert gut und wie erwartet. Das einzige Problem, das ich sehe, ist der Fehler, der in der Konsole auftaucht, der mich zu Tode zu ertasten beginnt, da er jedes Mal weiter erhöht wird, wenn ich auf eines der Elemente außer ul.menu-bootstrap-menu .dropdown-menu und .dropdown .dropdown-toggle klicke. Der gesamte Code ist in einen Funktionsaufruf document.ready verpackt.

Irgendwelche Ideen wie/warum das passiert?

Ich bin mit jQuery v1.11.3

Hier sind Bilder über Fehler, wenn es hilft:

Fehler in Console: Error in Console

Fehler in jQuery.min Datei: Error in jQuery.min file

+0

downvoted? Warum? –

+0

Können Sie weitere Details zu dem Fehler angeben? Wie der Fehlerstack. Welche jQuery-Version verwenden Sie? Ich sehe nichts offensichtlich falsch mit Ihrem Code und stopPropagation sollte keinen solchen Fehler verursachen ... Etwas anderes passiert. –

+0

@VictorLevin Bearbeitete Frage mit Bildern des Fehlers so viel wie ich auf dem Fehler zur Verfügung stellen kann. Sie können sehen, dass es auf '.stopPropagation' zeigt. –

Antwort

2

Problem hier denke ich

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); 

und hier

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

Du nennst jquery Funktion closest auf einem Nicht-jquery Objekt eventtarget.

+0

Wenn ich es in ein jquery-Objekt verwandle, funktioniert es nicht für 'navtargets' und' navbody', wenn ich das tue: 'var eventtarget = $ (e.target);' Ich bekomme Fehler bei diesem und diesem funktioniert nicht wie erwartet. –

+2

@Solomon Eric ist korrekt, Sie rufen eine jQuery-Methode für ein natives DOM-Objekt auf. Um das seltsame Verhalten zu beheben, von dem Sie sprechen, müssen Sie '! Navtargets' und'! Navbody' in Ihren bedingten Anweisungen in '! Navtargets.length' bzw.'! Navbody.length' ändern. All dies wäre offensichtlich, wenn Sie 'console.log()' für Ihre Variablen verwenden würden. Aber wirklich, dein ganzes Drehbuch scheint ein seltsamer Weg zu sein. Ohne ein richtiges [mcve] kann ich Ihnen nicht wirklich ein besseres Beispiel geben. –

+0

Es gibt auch eine native DOM-Methode namens engste: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Nur IE unterstützt dies nicht. Das ist gesagt, sieht nur aus wie OP will in der Tat die jq Objekt & Methode –

Verwandte Themen