css 如果使用 jQuery 改变 CSS 类，如何触发事件？

如果使用 jQuery 改变 CSS 类，如何触发事件？

原文:https://www . geesforgeks . org/how-fire-event-if-CSS-class-is-changed-use-jquery/

给定一个带有标题和按钮的 HTML 文档，当按钮的 CSS 类改变时，jQuery 应该触发一个事件。

方法:在 jQuery 中，没有关于类变化触发事件的规定。另一种方法是，当您使用 触发器()函数以编程方式更改类时，手动引发事件。每当按钮的等级改变时，触发器()功能将引发一个事件。

超文本标记语言

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>

    <style>
        .buttonstyle {
            background-color: #4CB96B;
            color: white;
        }

        .buttonsize {
            padding: 1em;
            height: 70px;
            width: 400px;
            border: .5px solid black;
            outline: none;
            font-size: large;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <center>
        <h1>
            Click the button to
            change its style
        </h1>

        <button id="classchange-btn" 
            class="buttonsize">
            Click Me
        </button>
    </center>

    <script>
        $("#classchange-btn").click(function () {
            $(this).toggleClass("buttonstyle")
                    .trigger('classChanged');
        });

        $("#classchange-btn").on(
            "classChanged", function () {
            alert("Button Style Change event fired");
        });
    </script>
</body>

</html>

Output: