Bom dia, terminei o curso e estou brincando para aprimorar meus conhecimentos, a brincadeira é a seguinte, fazer um joguinho semelhante ao aluratyper porem com alguns aprimoramentos como login, cadastro de usuários e outras paginas dentro da aplicação, mas sem recarregar a pagina, resumindo uma SPA sem o ANGULAR(conheço o framework, estou em nível intermediário).
Basicamente tenho um arquivo main.js que é importado no index.html que faz a busca de um template html que declarei em outro arquivo...
main.js
$(function(){
loadPage();
});
function loadPage(){
$.ajax({
url: 'partials/nav-principal.html',
type: 'GET',
dataType: 'text',
success: function(response){
console.log('deu certo');
$('.view').html(response); // elemento declarado no index "puxando" o html
},
error: function(erro){
console.log(erro);
}
})
};
$('a').on('click', function(e){
e.preventDefault();
});Bem estou tendo a minha parcial impressa no index, mas a função de preventDefault() que declarei no final do documento e qualquer outro evento de manipulação não funciona, só funciona se eu carregar o script diretamente na parcial.
Gostaria de saber se é possível manipular eventos sem ter que declarar os mesmo diretamente no arquivo HTML que estou requisitando.
Aqui esta o index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-- nao vai dar zoom em mobile -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- lib scripts -->
<script src="js/lib/jquery.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
</head>
<body>
<div class="view"></div>
<!-- scripts funcionais carregar aqui, após o carregamento de todo o DOM -->
<script src="js/main.js"></script>
</body>
</html>