Почему слушатели событий исчезают при повторном использовании фрагмента?

Question

Я пытаюсь использовать фрагменты следующим образом, но прослушиватель событий работает только один раз, и его уже нет, когда фрагмент используется повторно:

https://codepen.io/dvtan/pen/dyyGVKm

let $home = $(`
<div>
  <h1>Home page</h1>
  <button class="btn btn-primary">Go to another page</button>
</div>`);
let $another = $(`
<div>
  <h1>Another page</h1>
  <button class="btn btn-primary">Go back</button>
</div>`);
$("body").html($home);
$home.find('.btn').on('click', () => {
  $("body").html($another);
});
$another.find('.btn').on('click', () => {
  $("body").html($home);
});

IИнтуитивно полагая, что слушатели событий должны следить за фрагментом вокруг, поэтому не имеет смысла, что они просто так исчезнут. Почему это происходит, и как это можно решить?