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

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

方法：在 jQuery 中，没有规定在类更改时触发事件。另一种方法是在您使用trigger()函数编程方式更改类时手动引发事件。每当按钮的类发生更改时， trigger()函数都会引发一个事件。

HTML

  

  
    
    
  
    
    
  
    
        .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;
        }
    

  

    
        
            Click the button to
            change its style
        
  
        
            Click Me
        
    
  
    
        $("#classchange-btn").click(function () {
            $(this).toggleClass("buttonstyle")
                    .trigger('classChanged');
        });
  
        $("#classchange-btn").on(
            "classChanged", function () {
            alert("Button Style Change event fired");
        });
    

  

输出：

最初页面如下图所示。

单击按钮时，会弹出一条警告消息，指示已触发侦听器并且按钮的 CSS 类已更改。

关闭弹出窗口后，按钮的 CSS 类发生了变化(注意绿色背景颜色和白色文本)。