htmlに埋め込んだjavascritが１度しか実行されない(ajax)

前提・実現したいこと

Webで使えるアプリケーションを作るために、サンプルで楽天レシピAPIを使用して練習しています。
ajax通信を利用して、ページを更新したいです。
下記のコードを実行すると1度目のajax通信は成功していますが、２回目が実行されません（失敗の表記が出てこないため呼び出されていない？）
２度目以降も、同じようにページを更新するにはどの部分の記述を変えればよいでしょうか？

発生している問題

1度目のajax通信は成功し更新されるが、２回目が実行されない。

該当のソースコード

index.jsp :

最初の画面。

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3  
4<!DOCTYPE html>
5<html>
6<head>
7<meta charset="UTF-8">
8<title>APIテスト</title>
9<script src="${pageContext.request.contextPath}/jquery-3.5.1.js"></script>
10</head>
11<body>
12<h1>APIのテストページです</h1>
13
14<form action = "API" method = "post">
15<p>
16<input type = "radio" name = "categoryType" value = "small" checked = "checked"> small
17<input type = "radio" name = "categoryType" value = "medium" > medium
18<input type = "radio" name = "categoryType" value = "large" > large
19</p>
20<input type = "submit" value = "送信">
21</form>
22
23</body>
24</html>

API.java :

サーブレット。categoryTypeをindex.jspから持ってきて、楽天APIからもらえるJsonの中身をそれぞれを返す。

servlet
1必要な部分だけ記述
2
3	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
4		request.setCharacterEncoding("UTF-8");
5		
6		//	カテゴリータイプ	small midium large の中から受け取る
7		String categoryType = request.getParameter("categoryType");
8		
9		//	外部APIと接続し、jsonからデータを取得
10		APICatch a = new APICatch();
11		ArrayList<String> NameList = a.getNameList(categoryType);
12		ArrayList<String> urlList = a.urlList(categoryType);
13		//	セッションスコープにリストデータを保存
14		HttpSession session = request.getSession();
15		session.setAttribute("nameList", NameList);
16		session.setAttribute("urlList", urlList);
17		
18		//	結果画面にフォワード
19		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/result.jsp");
20		dispatcher.forward(request, response);
21		
22	}
23
24}
25

result.jsp :

レシピ名にURLを入れて表示する。　ここからajax通信を使ってcategoryTypeを変更した結果を表示させたい。
具体的には、selectで選んだcategoryTypeを上記のAPI.javaに送信し、ページを更新したい。

	  $.ajax({
          url: "API",
          type: "POST",
          data: {categoryType : $('select').val() }
        }).done(function (result) {
          // 	通信成功時のコールバック
        	document.write(result);
        	alert(result);
        }).fail(function () {
          // 	通信失敗時のコールバック
          alert("読み込み失敗");
        }).always(function (result) {
          //	 常に実行する処理
        });
      });
});

</script> <select> <option value ="small">small</option> <option value="medium">medium</option> <option value="large">large</option> </select> <button id="btn">Ajax</button>

<% for(int i = 0; i < nameList.size();i++){ %>
<a href = <%= urlList.get(i)%> target=”_blank”><%= nameList.get(i) %></a><br>
<%} %>

</body> </html> ```

試したこと

これを実行し、１度目のajax通信をするとアラートが表示されてページも更新されるのですが、２回からはどの要素を選んで通信を行おうとしても、失敗のアラートすら出てきません。２回目の通信を試みたときにはエラーは出ていません。
、![]

補足情報（FW/ツールのバージョンなど）

eclipse Version: 2020-06 (4.16.0)

行動規範の内容に同意します

回答1件

恐らくですが、

ページ読み込み、DOM構築が行われる
構築されたDOMに存在する#btn要素に対してclickイベントハンドラが設定される
Ajax通信
document.writeによってDOMが全て書き換えられる

という動きになっていますので、4.の段階でclickイベントが設定された#btn要素はDOMから消えています。
なので、document.writeを使用せずに既存のDOMに対してAjax通信後の操作を行うか、document.writeでDOMを書き換えた後に再度clickイベントを設定し直す必要があります。

投稿2020/09/02 15:01