jQueryでload関数を使用した後にJavaScriptが実行されない

html
1//index.html
2
3<!DOCTYPE html>
4<html lang="en" dir="ltr">
5  <head>
6    <meta charset="utf-8">
7    <title></title>
8    <link rel="stylesheet" href="index.css">
9    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
10  </head>
11  <body>
12
13    <div class="what">
14      <p>難易度選択</p>
15      <b id="easy">EASY</b>
16      <br>
17      <b id="normal">NORMAL</b>
18      <br>
19      <b id="hard">HARD</b>
20      <br>
21      <p>*難易度を選択すると始まります</p>
22      <script type="text/javascript" src="select.js"></script>
23    </div>
24
25  </body>
26</html>

js
1//select.js
2document.getElementById("easy").onclick = function(){
3    $("body").load("easy.html");
4}

html
1easy.html
2<!DOCTYPE html>
3<html lang="en" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7
8    <style media="screen">
9      #detailscontents{
10        background-color: white;
11        width: 100px;
12      }
13    </style>
14
15  </head>
16  <body>
17    <div id="detailscontents">
18      <b id="easy">EASY</b>
19      <br>
20      <p>SCORE:<span id="score">0</span></p>
21      <p>ミスの回数<span id="misscount">0</span></p>
22      <script type="text/javascript" src="rogick.js"></script>
23    </div>
24
25  </body>
26</html>
27

js
1//rogick.js
2alert(1);

現在HTMLとJavaScriptでタイピングアプリを作成しています。
id="easy"をクリックすると、select.js側でeasy.htmlを読み込みます。
easy.htmlでrogick.jsを読み込みたいのですが、alert(1);が実行されません。

自分の中の挙動では、
easyが押される->index.htmlのbodyがeasy.htmlのbodyに変更される->alert(1)
が実行されるという流れなのですが、alertが実行されません。

どうすればよいですか？

chromeの開発者ツールには

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help,

このようなエラーが出ていました