Question

使用$(document).on('ready', function(){////})时，没有任何事情发生，所以我改为$(document).ready(function(){////})。

当使用.on函数时，它不工作并抛出错误和执行如下：

警告：

jQuery.Deferred异常：tabs [i] .on不是函数TypeError：   tabs [i] .on不是函数       在HTMLDocument。（https://animesh.dev/wp-content/plugins/hyparticles/assests/script.js?ver=4.9.1:7:11）       在j（https://animesh.dev/wp-content/plugins/hyparticles/assests/jquery-3.2.1.min.js?ver=4.9.1:2:29999）       在k（https://animesh.dev/wp-content/plugins/hyparticles/assests/jquery-3.2.1.min.js?ver=4.9.1:2:30313）   未定义

错误：

未捕获TypeError：tabs [i] .on不是函数       在HTMLDocument。（的script.js版本4.9.1 =：7）       在j（jquery-3.2.1.min.js？ver = 4.9.1：2）       在k（jquery-3.2.1.min.js？ver = 4.9.1：2）

注意：tabs是我在script.js

中定义的变量

注意：我在缩小版本中使用jquery v3.2.1（最新版）

出现错误的原因

我的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

错误指向：

tabs[i].on(...

不在document.ready事件中使用。

因为.on()是jQuery对象上的函数，而不是JavaScript中的任何HTML元素。当你遍历jQuery对象的结果时，HTML元素正是你得到的。

您不需要首先循环。您已经拥有 jQuery对象：

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

您只需在该对象上调用.on()：

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

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

});

Answer 2

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

中删除

还有$（document）.on（“ready”，handler），从jQuery 1.8开始不推荐使用，并在jQuery 3.0中删除。

Answer 3

那么这个

的问题是什么

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

在这种情况下，您使用括号表示法，这是jQuery＆＃39; s tabs.get(i)的缩写。 get(index)方法返回DOM对象，它不返回jQuery对象。由于DOM没有on()，因此会抛出错误。

那你怎么解决呢？您可以使用返回jQuery对象的eq（）

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

但是当jQuery为你做这件事时，为什么要自己遍历这些元素。

tabs.on("click", switchTab);

Answer 4

您不需要for循环：

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

    tabs.on('click', switchTab)

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

});

Answer 5

试试这个

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

jquery .on不工作

5 个答案: