讀取之前插入的腳本-有解無憂

我有一個帶有選單的 html，當用戶在選單中選擇一個選項時，它不會重定向到其他頁面，腳本將目標 html 插入到主頁上的一個部分中。但我想操作插入的 html，但我使用的所有 's 似乎只讀取主 html 上的資訊。我怎么能操縱插入的html？

<!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>

這是在不重定向頁面的情況下進行導航的代碼。我想操縱插入的 html，但沒有任何效果。

uj5u.com熱心網友回復：

在 fetch 函式中插入元素后，您必須為插入到 dom 的元素運行所有代碼。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/505679.html

標籤：javascript html css 重定向导航

上一篇：301在htaccess中重定向具有引數P的URL

下一篇：Htacess深度重定向路徑