Read script inserted before-CodePudding

I have a html with a menu, that doesnt redirect to other page when the user chooses an option in the menu, the script inserts the target html inside a section on the main page. But i want to manipulate that inserted html, but all the 's that i use only seems to read the information on the main html. How could i manipulate the html inserted?

<!DOCTYPE html>
<html lang="en" id="background">

<head>
    <title>METRO PROJECT</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <nav>
            <div id="">
                <a href="https://google.com.br"><img src="images/metroLogo.png" width=9%></a>
            </div>
            <div>
                <ul>
                    <li>
                        <a href mnav="index.html"><b>HOME</b></a>
                    </li>
                    <li>
                        <a href mnav="consulta.html"><b>CONSULTA</b></a>
                    </li>
                    <li>
                        <a href mnav="mapa.html"><b>MAPA</b></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <section id="teste">
        <!-- <div class ="white-box">   -->
    </section>

    </div>
    <script>
        document.querySelectorAll( '[mnav]' ).forEach( link => {
            const conteudo = document.getElementById( 'teste' )

            link.onclick = function ( e ) {
                e.preventDefault()
                fetch( link.getAttribute( 'mnav' ) )
                    .then( resp => resp.text() )
                    .then( html => conteudo.innerHTML = html )
            }
        } )


        //HERE I WANT TO MANIPULATE THE SCRIPT THAT IS INSERTED (A FORM)

        const submit = document.querySelector( '[mSubmit' )
        submit.onclick = function ( e ) {
            e.preventDefault()
            const form = e.target.parentNode
            const formData = new FormData( form )
            const hora = formData.get( 'horas' )
            const minuto = formData.get( 'minutos' )
            console.log( hora )
            console.log( minuto )
        }

    </script>
</body>

</html>

this is the code that does the navigation without redirecting the page. i want to manipulate the html inserted but nothing works.

CodePudding user response：

You must run all the code for the elements that you insert to the dom after you insert the elements in the fetch function.

<script>
    document.querySelectorAll( '[mnav]' ).forEach( link => {
        const conteudo = document.getElementById( 'teste' )

        link.onclick = function ( e ) {
            e.preventDefault()
            fetch( link.getAttribute( 'mnav' ) )
                .then( resp => resp.text() )
                .then( html => conteudo.innerHTML = html )
                .then(() => {
                             const submit = document.querySelector( '[mSubmit' )
                             submit.onclick = function ( e ) {
                             e.preventDefault()
                             const form = e.target.parentNode
                             const formData = new FormData( form )
                             const hora = formData.get( 'horas' )
                             const minuto = formData.get( 'minutos' )
                             console.log( hora )
                             console.log( minuto )
                             }
                })
        }
    } )


    //HERE I WANT TO MANIPULATE THE SCRIPT THAT IS INSERTED (A FORM)



</script>