如何操作通过Fetch动态插入到页面中的HTML元素？

我有一个带菜单的HTML页面，点击菜单选项时不会跳转页面，而是通过Fetch将目标HTML内容插入到主页面id为teste的section标签中。但尝试操作插入的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>

解决方法 #

方法1：使用事件委托（推荐） #

利用事件冒泡机制，将事件绑定到已存在的父元素上（比如#teste），无论子元素是初始加载还是动态插入，都能触发事件。同时修正你原代码中选择器的语法错误（[mSubmit缺少闭合方括号）：

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

// 绑定事件到父元素#teste
document.getElementById('teste').addEventListener('click', function(e) {
    // 验证点击的元素是目标按钮
    if (e.target.hasAttribute('mSubmit')) {
        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)
    }
})

方法2：在HTML插入完成后绑定事件 #

在Fetch的回调函数中，等HTML插入到#teste后，再获取动态元素并绑定事件：

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
                // 插入完成后获取目标元素并绑定事件
                const submit = conteudo.querySelector('[mSubmit]')
                if (submit) {
                    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)
                    }
                }
            })
    }
})

内容的提问来源于stack exchange，提问作者juanOwl