失礼いたします。
Ajaxをもちいてページを作成しているのですが、少し気にかかったのでご教授いただければ助かります。
例として、
ready.html
load.html
ready.js
ajax.js
の4ファイルがあったとし、
・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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/05 06:05