jquery .on funktioniert nicht

Question

Bei der Verwendung $(document).on('ready', function(){////}) passiert nichts, also habe ich auf $(document).ready(function(){////}) geändert.

Wenn Funktion .auf seine nicht funktioniert und Fehler und exeption werfen wie folgt:

Warning:

jQuery.Deferred exception: tabs[i].on is not a function TypeError: tabs[i].on is not a function at HTMLDocument. (https://animesh.dev/wp-content/plugins/hyparticles/assests/script.js?ver=4.9.1:7:11) at j (https://animesh.dev/wp-content/plugins/hyparticles/assests/jquery-3.2.1.min.js?ver=4.9.1:2:29999) at k (https://animesh.dev/wp-content/plugins/hyparticles/assests/jquery-3.2.1.min.js?ver=4.9.1:2:30313) undefined

Error:

Uncaught TypeError: tabs[i].on is not a function at HTMLDocument. (script.js?ver=4.9.1:7) at j (jquery-3.2.1.min.js?ver=4.9.1:2) at k (jquery-3.2.1.min.js?ver=4.9.1:2)

Anmerkung: Tabs ist eine Variable innerhalb von mir definierten

Anmerkung script.js: Ich verwende jquery v3.2.1 (spätestens) in minify Version

warum kommt der Fehler aus

Mein script.js:

$(document).ready(function() { 
    alert("ready"); 
    var tabs = $("ul.nav-tabs > li"); 

    for (i = 0; i < tabs.length; i++) { 
     tabs[i].on("click", switchTab); 
    } 

    function switchTab(event) { 
     event.preventDefault(); 
     console.log(event); 
    } 

}); 

Answer 1

Was ist das Problem mit dieser

tabs[i].on("click", switchTab); 

In diesem Fall verwenden Sie die Klammernotation, die für jQuerys tabs.get(i) kurz ist. Die Methode get(index) gibt das DOM-Objekt zurück und gibt kein jQuery-Objekt zurück. Da DOM nicht über on() verfügt, wird ein Fehler ausgegeben.

Also, wie können Sie es beheben? Sie könnten eq(), die wieder ein jQuery-Objekt

tabs.eq(i).on("click", switchTab); 

aber warum Schleife über die Elemente verwenden, um sich, wenn jQuery macht es für Sie.

tabs.on("click", switchTab); 

Answer 2

$(document).on('ready') von jQuery 3.0https://api.jquery.com/ready/

There is also $(document).on("ready", handler), deprecated as of jQuery 1.8 and removed in jQuery 3.0.

Answer 3

Der Fehler entfernt wird, zeigt auf diese:

tabs[i].on(... 

nicht die Verwendung auf dem document.ready Ereignis.

Weil .on() eine Funktion für das jQuery-Objekt ist, nicht für ein HTML-Element in JavaScript. Und wenn Sie die Ergebnisse eines jQuery-Objekts durchlaufen, sind HTML-Elemente genau das, was Sie bekommen.

Sie müssen nicht in erster Linie Schleife. Sie haben bereits haben ein jQuery-Objekt:

$("ul.nav-tabs > li") 

Sie einfach .on() für das Objekt aufrufen können:

$(document).ready(function() { 
    $("ul.nav-tabs > li").on("click", switchTab); 

    function switchTab(event) { 
     event.preventDefault(); 
     console.log(event); 
    } 

}); 

Answer 4

Sie brauchen nicht die for-Schleife:

$(document).ready(function() { 
    var tabs = $("ul.nav-tabs > li"); 

    tabs.on('click', switchTab) 

    function switchTab(event) { 
     event.preventDefault(); 
     console.log(event); 
    } 

}); 

Answer 5

Probieren Sie diese

$(document).ready(function() { 
    $(document).on("ul.nav-tabs li" ,"click", function(event){ 
     event.preventDefault(); 
     console.log(event); 
    }); 
});