注意动态添加的类答案

【问题标题】：Watch for Dynamically Added Class注意动态添加的类
【发布时间】：2014-06-05 19:34:27
【问题描述】：

如果一个类被动态添加到一个元素中，是否有一个监听器可以让我观察和运行代码？我正在使用 WordPress CMS 和一个插件，我正在使用我们动态添加一个类，我想在发生这种情况时赶上并运行一些自定义代码。

change / onChange 似乎不起作用：

$('#test').change(function(){
    alert('test');
});

我可以添加另一个监听器来捕捉这个吗？

起初我认为这并不重要，但动态类是在 ajax 调用之后添加的。我目前正在尝试与ajaxComplete() 合作，但没有任何运气。

【问题讨论】：

事件委托。 api.jquery.com/on
@Howdy_McGee 我删除了我的答案只是因为这并没有以我理解的方式回答你的问题。
@Jai 谢谢，你的回答绝对有帮助。我能够使用.ajaxComplete() - 拆分类（你的答案有），看看是否添加了某个动态类。我会在一分钟内发布我的代码。

标签： javascript jquery event-listener

【解决方案1】：

试试

$(document).ready(function() {

var target = $("#test").get(0);

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // do stuff when
    // `attributes` modified
    // i.e.g., 
    alert(mutation.type);
    target.innerHTML = "class added: " 
                       + "<em>" 
                       + target.className 
                       + "</em>";
  });    
});

// configuration of the observer:
var config = { attributes: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

    $("#test").addClass("test-1");

    // later, you can stop observing
    // observer.disconnect();

})

jsfiddle http://jsfiddle.net/guest271314/35cVL/

见https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

【讨论】：

【解决方案2】：

您唯一能做的就是修改插件并在添加类时触发自定义事件。没有事件来监听元素属性的变化，原因是这些变化总是由代码引起的，因此 W3 假定任何所需事件的自定义实现。

如果插件的源代码不可用，您唯一的选择就是自己构建一些东西。

【讨论】：

【解决方案3】：

我能够使用ajaxComplete() 找到通过 ajax 添加的动态类。

$( document ).ajaxComplete(function(){
    if ($('#test').hasClass('invalid')){...}
}

致任何有兴趣的人 - 如果我的 WPCF7 表单无效，我正在使用带有 WordPress 的 Contact Form 7 并使用上面的代码运行自定义 jquery。

【讨论】：

仅供参考你可以做$('#test').hasClass('invalid')。