javascript - 在 JQuery .load() 我的按钮不起作用之后

Question

我一直在一个网站上工作，我想用 jquery 将一个 html 文件加载到一个 div 中。一切正常，除了我在加载的 html 中的按钮。如果我点击它们，什么也不会发生。我什至不能用 css 添加 #btn:hover{cursor: pointer;} 尽管其他所有样式都可以正常工作。

$(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");
})