Tengo un html con un li, para que al apretar uno, me carge en un div, un html, (que dejo mas abajo). El html se carga, y el archivo de JavaScript tambien. El html que se carga correctamente, tiene un boton, y quiero que al apretar el boton, muestre un alert. El archivo JavaScript se carga, pero la funcion click no.
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<!-- Cabecera -->
<header>
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-center">
<li><a id="inicio" href="#">Inicio</a></li>
<li><a id="donar" href="#">Donar</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Cuerpo -->
<main class="container-fluid">
<section class="row">
<article class=".col-12 .col-sm-12 .col-md-12 .col-lg-12 .col-xl-12 mostrarAqui">
</article>
</section>
</main>
<footer class="container-fluid">
</footer>
</body>
</html>
Este es el archivo de jquery para que se muestre el html en el div.(Sin problemas)
window.addEventListener("load", inicio);
function inicio() {
//Cuando carge el documento, estara escuchando que boton pulsamos.
$(document).ready(function () {
$("#inicio").click(function(){
$(".mostrarAqui").load("hola.html");
})
$("#donar").click(function(){
$(".mostrarAqui").load("adios.html");
})
})
}
Y este es el html que tiene que cargar en el div.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Hola</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div>
<input type="text">
<input type="submit" value="Enviar" id="enviar">
</div>
</body>
</html>
Este es el JS para que haga el alert que nunca hace.
window.addEventListener("load", inicio);
function inicio() {
document.getElementById("enviar").addEventListener("click", enviar);
}
function enviar() {
alert("Bienvenido: " );
}
Mi pregunta es ¿por qué no hace el alert?, el debug no muestra nada, y otra pregunta, ¿es correcto hace una pagina entera con sus etiquetas para solo cargar el div con el input y el button o hay otra manera?