Question

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

更改/ onChange似乎不起作用：

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

我可以添加另一个能够捕获它的侦听器吗？

我一开始并不认为这很重要，但是在ajax调用之后会添加动态类。我目前正在尝试使用ajaxComplete()，但没有运气。

Answer 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

Answer 2

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

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

Answer 3

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

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

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

注意动态添加类

3 个答案: