Как использовать jquery для проверки вновь вставленных элементов после завершения загрузки страницы?

Question

Итак, я пытаюсь использовать jquery или greasemonkey/tampermonkey userscript для создания основного звука «ding» в чате, когда упоминается мое имя пользователя.

$(window).load(function(){ 
var $ = window.jQuery; 
var jQuery = window.jQuery; 

//Notify Sound preload 
var player = document.createElement('audio'); 
player.src = '/ding.mp3'; 
player.preload = 'auto'; 

var me = 'secretsquirrel'; 
window.addEventListener('load', function() { 
$('.chat-main').on('DOMNodeInserted', 'li', function check(event) { 
    if ($(event+'.mention:has('+me+')' === true)) {player.play(); console.log('Found my name!');} 
}); 
}, false); 
}); 

Я знаю, что DOMNodeInserted устарел, это не проблема. Моя проблема в том, что я только хочу, чтобы он запустил новые вставленные dom-узлы, в которых есть мое имя пользователя. Узлы: <a> теги с class="mention" вложенные в <li> прикрепленные к ним и имя пользователя в <span>.

Если я не являюсь пользователем $(window).load(function(), функция ding работает, но она делает это для КАЖДОГО экземпляра имени, поэтому, если страница обновлена ​​и т. Д., Это будет console.log и ding несколько раз.

Я все еще довольно новичок в jquery, помогите? лол

Answer 1

IE11 +

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 

    // Will be something like { addedNodes: NodeList[1]} 
    console.log(mutation.addedNodes); 
    }); 
}); 

Там в MutationObserver API, которые вы можете использовать.