元素特定类更改时的jQuery触发功能答案

【问题标题】：jQuery fire function when element specific class change元素特定类更改时的jQuery触发功能
【发布时间】：2014-12-05 13:01:54
【问题描述】：

当我在按钮上添加特定类时，我需要触发一个事件，但我不知道如何让它监听类添加事件。

我有这样的事情：

<script type="text/javascript">   

$(document).ready(function() {


    $(id_element).addClass("active");

     //this function will fire on add "active" class to "id_button" element
     function fireOnActiveClass() {
        //do something
     }


} 

</script>

由于更多原因，我无法触摸代码$(id_element).addClass("active");。

目前我使用 jQuery 1.7.2

您能告诉我如何或需要知道哪些吗？

【问题讨论】：

Mutation Observer?
有很多不同的方法可以做到这一点，但问题是为什么你需要关于你发布的代码，因为显然你已经知道何时添加这个特定的类
如果您不需要支持旧版浏览器，您可以使用动画/过渡结束事件，使用假动画/过渡并使用特定的 CSS 规则。或者扩展addClass()方法触发自定义事件，或者...

标签： javascript jquery javascript-events addclass

【解决方案1】：

您正在修改代码中的控件类。那么为什么不在更改类时简单地调用按钮的单击呢？

$(id_element).addClass("active");
$(id_button).click();

$(id_button).click(function () {
     if ($(this).hasClass) {
     //do something

     }
 });

【讨论】：

【解决方案2】：

类更改时不会引发任何事件。另一种方法是在您以编程方式更改类时手动引发事件：

$(document).ready(function() {
    $(id_element).addClass("active").trigger('classChange');
    $(id_element).on('classChange', function() {
         // do stuff
    });
});

【讨论】：

为什么需要在这里触发自定义事件？添加类后只需调用方法
@A.Wolff 触发自定义事件提供了更大的灵活性，并允许人们监听事件冒泡，也许？它也更具可扩展性。
但是由于您仍然需要触发它，所以我在这里看不到任何目的（关于这个具体示例） PS：关于灵活性，可能会冒泡

【解决方案3】：

另一种方法是在添加类后立即调用函数，例如：

$.fn.classAdded = function() {
    var $button = $(this);
    if($button.hasClass('id_button')) {
        // ...
    }
    return $button;
}

$(id_element).addClass("active").classAdded();

【讨论】：

【解决方案4】：

我找到了使用这个 jQuery 插件的解决方案：http://meetselva.github.io/attrchange/

【讨论】：

【解决方案5】：

这个 jQuery 插件有什么帮助吗？

https://github.com/tormjens/jquery-dom-router

您可以使用更改默认元素 $.DOMRouter.defaults.element = '#element'; 在初始化插件之前。

【讨论】：