jquery - 当元素“准备好”而不是收到事件时如何使用jQuery on()？

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 运行良好，但“load”（或“ready”）不起作用。我当然可以这样做：

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

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

所以有什么问题？

顺便说一句，我尝试将上述代码放入 document.ready() 而不是，但两者都不起作用。

我检查了很多 jquery.on() 示例，但所有这些示例都是关于处理“单击”“mouseenter”或其他事件的。

感谢您的帮助。

Answer 1

As @adeneo said, "ready" event works only for document. And any manipulation of DOM should be done after document is ready. So all your code should reside inside $(document).ready (unless your JavaScript is inline after the HTML, which is a bad practice).

Then you can add your class to your .hover-opaque element. No need for individual "ready" event for it.

For example:

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