Boa tarde a todos, Sou um novo estudante aqui no alura e estou gostando muito do curso FRONT-END. Tenho a intenção de fazer um portal para a empresa a qual trabalho e gostaria de fazer uma pagina fixa (master page assim chamado no asp.net). Mal aprendi a criar um hello world e já estou querendo algo avançado :). Quero incluir uma pagina ou um componente para dentro de uma 'div' da pagina principal, estou utilizando o 'innerHTML', acredito que essa não seria uma boa maneira. Já tentei usar também o 'createElement' junto com o 'append' mas não tive sucesso. Segue o meu objetivo: Na pagina principal tenho um botão e quando eu clico no mesmo, vai ser adicionado no 'div' da pagina um html com uma tabela. O problema vem agora, eu tenho um evento click já escrito no index.js. Eu preciso saber se o clique foi efetuado na tabela ou não. Esse evento não funciona depois que entra o html. Onde estou errando? Eu tenho que recarregar o arquivo index.js? obs.: estou utilizando o css e js do bootstrap para enfeitar a tabela.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button id="botaoPrincipal">Clica aqui</button>
<div class="espacoTabela"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>index.js
$("#botaoPrincipal").click((event) => {
var espacoTabela = document.querySelector(".espacoTabela");
espacoTabela.innerHTML = '<table class="table table-dark tabela"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>';
});
$(".tabela").click((event) => {
event.preventDefault();
console.log("Cliquei na tabela");
})
