Question

我正在尝试构建一个半透明的菜单（和其他东西），代码看起来像这样：

    $(".hover-opaque").on({
        load: function () {
            $(this).addClass("opacity02");
        },
        mouseenter: function() {
            $(this).removeClass("opacity02");
            $(this).addClass("opacity1");
        },
        mouseleave: function() {
            $(this).removeClass("opacity1");
            $(this).addClass("opacity02");
        }
    });

当它被加载（或“准备好”）时，addClass（“opacity02”）使其半透明，当鼠标输入时，通过addClass（“opacity1”）使其变得不透明，当鼠标离开时，执行相反的一面。

到目前为止，mouseenter和mouseleave运行良好，但“加载”（或“就绪”）不起作用。当然，我可以这样做：

    $(".hover-opaque").addClass("opacity02");

但我听说它无法处理Ajax生成的内容。

那么问题是什么？

顺便说一句，我尝试将上面提到的代码放在document.ready（）中而不是，但两者都没有用。

我检查了很多jquery.on（）的样本，但所有样本都是关于处理“click”“mouseenter”或其他事件。

感谢您的帮助。

Answer 1

正如@adeneo所说，“就绪”事件仅适用于文档。在文档准备好之后，应该对DOM进行任何操作。因此，您的所有代码都应驻留在$(document).ready内（除非您的JavaScript在HTML之后是内联的，这是一种不好的做法）。

然后，您可以将班级添加到.hover-opaque元素中。不需要单独的“准备好”事件。

例如：

$(function() { // shorthand for $(document).ready
  $(".hover-opaque").addClass("opacity02").on({
    //...your events...
  });
});

当元素“准备好”而不是收到事件时，如何在（）上使用jQuery？

1 个答案: