Estaba agregando un MutationObserver en mi código JavaScript y lo apliqué a un elemento específico en un iFrame. La detección funciona bien pero ahora necesito un segundo observador. Después del primer clic en el iFrame, todo el DOM cambia y ese es el momento en el que entra el primer observador y detecta cualquier otro clic en los elementos de navegación en el iFrame. Además de eso, necesito observar un elemento div y si su texto se cambiará o no. Entonces, la idea era crear un segundo observador después de hacer clic en un botón de navegación, pero parece que no funciona ya que el segundo observador no da ningún resultado en mi consola.

Aquí está el código JavaScript:

 $('iframe').on('load', function() { let observer = new MutationObserver(mutationRecords => { let completed = false; var progress = $('iframe').contents().find('.overview-sidebar__header .progress-bar__percentage-bottom').first(); let clickedClass = mutationRecords[0].target.attributes[0].nodeValue; if(clickedClass == 'transition-group') { console.log(progress.text()); console.log(Math.ceil(Date.now() / 1000)); } else if(clickedClass == 'page-wrap' && !mutationRecords[0].nextSibling) { let secondObserver = new MutationObserver(mutationRecords => { console.log('Test') }); secondObserver .observe($('iframe').contents().find('.transition-group').first()[0], { childList: true, subtree: true }); console.log(Math.ceil(Date.now() / 1000)); $('iframe').contents().find('.section-lists .lesson-lists__item').each(function(index) { console.log(index); console.log($(this).find('.lesson-link__name > span').first().text()); console.log($(this).find('.lesson-link__progress title').text().split('%')[0]); }); } }); observer.observe($('iframe').contents().find('.transition-group').first()[0], { childList: true, subtree: true }); });

El segundo observador en la rama else if es el problema aquí. ¿Alguien tiene una idea de cómo solucionar esto?