javascript - jQuery 不记录事件或执行功能

Question

$('.logoTop').on('click', 'img', function (event) {
    console.log(event);
    if ($(".navTop").css("top", "-100px")) {
        $(".navTop").css("top", "0px");
    }
    else{
        $(".navTop").css("top", "-100px")
    }
});

这是我的代码，其中 .logoTop 是一个图像，但是当我单击它时，没有任何反应，控制台甚至不记录事件。

编辑:该函数包含在 $(document).ready() 中，其他函数工作正常。

注意:我使用其他 jQuery 函数在此函数之前添加和删除类名。

Answer 1

如果 .logoTop 是图像的类，它永远不会触发，因为你基本上是在说:

在类名为 logoTop 的元素中找到一个图像并等待点击事件。

你的图像标签中没有图像，所以你的代码应该像这样

$('body').on('click', '.logoTop', function (event) {
    console.log(event);
    if ($(".navTop").css("top", "-100px")) {
        $(".navTop").css("top", "0px");
    }
    else{
        $(".navTop").css("top", "-100px")
    }
});

或者简单地(请注意，第一个示例适用于动态创建的元素)

$('.logoTop').on('click', function (event) {
    console.log(event);
    if ($(".navTop").css("top", "-100px")) {
        $(".navTop").css("top", "0px");
    }
    else{
        $(".navTop").css("top", "-100px")
    }
});