. Делегированное событие без нажатия

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): -

$(document).on('DOMNodeInserted', '.container', function() { 
 
    $('.form-row').addClass('radio'); 
 
}); 
 

 

 
$('<div></div>', { 'class':'form-row' }).appendTo('.container');

.container{ 
 
    background-color:blue; 
 
    padding:20px; 
 
} 
 

 
.radio{ 
 
    height:50px; 
 
    background-color:red; 
 
}

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