我有一个带菜单的html，当用户在菜单中选择一个选项时，它不会重定向到其他页面，脚本会将目标html插入主页面的一个部分。但我想操作插入的html，但我使用的所有的似乎都只是读取主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，但什么都不起作用。
在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>