Ajaxで非同期でページを読み込んだ際、読み込み済みのJavascriptを使えるようにするには

失礼いたします。
Ajaxをもちいてページを作成しているのですが、少し気にかかったのでご教授いただければ助かります。

例として、

ready.html
load.html
ready.js
ajax.js

の４ファイルがあったとし、

・ready.html

html
1<html>
2 <head>
3  <meta charset='utf-8'>
4  <script type=text/javascript src='ready.js'></script>
5  <script type=text/javascript src='ajax.js'></script>
6 </head>
7 <body>
8  <div id='Wrap'>
9   <div id='example'></div>
10  </div>
11 </body>
12</html>

・load.html

html
1<div id='example'></div>

・ready.js

javascript
1document.addEventListener('DOMContentLoaded', function(){
2 const elem = document.getElementById('example');
3 const elemWidth = elem.clientHeight + 'px';
4 elem.style.width = elemWidth;
5});

・ajax.js

javascript
1  document.addEventListener('DOMContentLoaded', function(){
2   document.getElementById('Wrap').addEventListener('click', function(){
3      const xh = new XMLHttpRequest();
4      xh.open('POST', 'load.php');
5      xh.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
6      xh.send(null);
7      xh.addEventListener('load', function(){
8        document.getElementById('Wrap').innerHTML = xh.responseText;
9      });
10    });
11   });
12

といった場合で、Wrapの子要素であるexampleを入れ替えてることになるのですが、このexampleの幅を最初にJavascriptでとっているわけですが、Ajaxで中身を入れ替えるとこの最初に設定した幅が再挿入した場合に適用されません。
javascriptファイルを読み込み直せばいいのかと思い、ajaxで更新する部分にjavascriptのファイルを置いてみたりしましたが、効きませんでした。
ajaxで読み込んだ後に、幅を取るスクリプトをもう一度実行するよう追記すれば適用されます。
またclickイベントのものも発火しませんでした（追記すればOKです）。
現時点では関数化してるものが多いので、それほど困ってはないんですが、少しでも記述を減らしたいので気になりました。

分かりにくい説明かもしれませんが、よろしくお願いいたします。

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

回答1件

ベストアンサー

ready.jsの中身を後から呼び出せるように出来ればよいのですから,現在イベントリスナとして登録している匿名関数に名前を付けておけばよいのです. 例えばこのように.

JavaScript
1//ready.js
2function ready(){//この処理はajax.jsからも呼び出す
3 const elem = document.getElementById('example');
4 const elemWidth = elem.clientHeight + 'px';
5 elem.style.width = elemWidth;
6}
7document.addEventListener('DOMContentLoaded', ready);

JavaScript
1//ajax.js
2  document.addEventListener('DOMContentLoaded', function(){
3   document.getElementById('Wrap').addEventListener('click', function(){
4      const xh = new XMLHttpRequest();
5      xh.open('POST', 'load.php');
6      xh.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
7      xh.send(null);
8      xh.addEventListener('load', function(){
9        document.getElementById('Wrap').innerHTML = xh.responseText;
10      });
11      ready();
12    });
13   });