Question

我正在使用第三方插件。我需要改变一些CSS。

我不能依赖点击或其他鼠标或键盘事件。

我需要当屏幕上存在“x”元素时，它会收到一些类。

$(document).on('ready load', '.form-row', function() {
    $(this).addClass('radio');
});

我知道有人会复制关于加载事件的jquery文档。

但是当我将一些元素插入到DOM中时，我需要接收这个类。

我已经在旧版本的jquery中做了这个，我不明白为什么现在它不起作用

Answer 1

使用MutationObserver，您可以收听DOM更改，特定HTML节点或整个DOM ...

注意：您应该检查MutationObserver的浏览器兼容性，以确保它符合您的需求。

以下是一个示例代码，了解它的工作原理：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

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

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

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

Answer 2

尝试DOMNodeInserted，您可以定位插件发生的特定元素（.container）： -

＆＃13;

$(document).on('DOMNodeInserted', '.container', function() {
    $('.form-row').addClass('radio');
});


$('<div></div>', { 'class':'form-row' }).appendTo('.container');

＆＃13;

.container{
    background-color:blue;
    padding:20px;
}

.radio{
    height:50px;
    background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

＆＃13;

.on委托事件没有点击

2 个答案: