После JQuery .load () мои кнопки не работают

Question

Я работал на веб-сайте, где я хочу загрузить файл html в div с jquery. Все отлично работает, кроме моих кнопок в загруженном html. Если я нажимаю на них, ничего не происходит. И я даже не могу добавить #btn: hover {cursor: pointer;} с css, хотя все остальные стили работают нормально.

$(document).ready(function() {
  $('#main-content').load('./content/frontpage.html', complete);
});

function complete(){
  const Btn = document.getElementById('btn')
  
  //logs out the button nicely
  console.log(Btn);
  
  //Tried this way -- not working
  Btn.addEventListener("click", () => {
        console.log("clicked");

  });

  //Tried this way as well -- not working
  $(document).on('click', '#btn', () => {
        console.log("clicked");
  })
}

//index.html
...
<main id="main-content">

</main>
...

//frontpage.html
<section class="container">
  <button id="btn">Click me</button>
  
</section>

Кто-нибудь знает в чем проблема? Я искал решения, но пока ничего не работает.

РЕДАКТИРОВАТЬ:

Да, и, кстати, если я нажму кнопку на консоли с: document.getElementById ( 'btn'). click ();

это работает ... Кто-нибудь что-нибудь знает, что, черт возьми, происходит?

Answer 1

Похоже, вы не закрываете строку 3 следующим образом:

});

Другой способ добавить прослушиватель кликов также:

$('#btn').click(function() {
    console.log("clicked");
})

Answer 2

Хорошо. Ваш код работает хорошо, за исключением синтаксической ошибки ниже.

$(document).ready(function () {
    $('#main-content').load('frontpage.html', complete);
});

function complete() {
    ...