Ajaxで呼び出したJavaScriptを動かしたい

Question

Ajaxで「JavaScriptコードを含むHTML」を呼び出してるのですが、
表示はされるもののJavaScriptが動きません。

「呼び出しているHTML」は記事のリストで、
JavaScriptで実現しようとしているものは
「表示する記事が3件以上ある場合は省略し、ボタンで広げる」
です。

直書きすると動くのですが、Ajaxで呼び出すと
このアコーディオンが効きません。

Googleで調べてみて色々と試したものの動かず…。
よろしくお願いします(;´д｀)

<div id="addHtml"></div>

<script>
$(document).ready( function(){
	$.ajax({
		type: 'post',
		url:'/realtime/contents/get.php',
		data:{
			genreCode:'{$genreCode}',
			typeCode:'{$typeCode}',
		},
		success: function(data){
			document.getElementById('addHtml').innerHTML=data;
		}
	});
});
</script>

Answer 1

Ajaxで「JavaScriptコードを含むHTML」を呼び出してるのですが

その実装自体に問題が有ると思いますが、innerHTML で生成された script要素は実行されません。

【element.innerHTML - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

HTML5 では innerHTML によって挿入された <script> タグは実行しないとように指定しています。

---

document.createElement('script'); で回避するなどいくつか方法はありますが、そもそもデータを取得するだけの目的であればスクリプトは呼び出し側で用意するのが良いと思います。

【javascript - innerHTMLに入れたコードの中にscriptタグがあっても実行されないのはなぜ？ - スタック・オーバーフロー】
https://ja.stackoverflow.com/questions/2756/innerhtmlに入れたコードの中にscriptタグがあっても実行されないのはなぜ

【innerHTMLでscriptする - Thousand Years】
http://shogo4405.hatenadiary.com/entry/20061207/1165479339

Comments

[退会済みユーザー]

ご回答ありがとうございます！

サーバーからの応答速度を上げるために処理結果を書き出したHTMLをファイルとして保存し、
ユーザーにはその静的ファイルを読ませているのですが、
それだと新着記事が投稿された場合にHTMLが更新されないのでこのような形を取っています…。

[kei344]

その場合でも「JavaScriptコードを含むHTML」である必要はないと思いますよ。JavaScriptで動かしたいのは呼び出した後のHTMLなのであれば、読み込む側にコードを書くのが普通だと思います。（応答速度を上げげるためにも無駄なデータを毎回呼び出しせず、jsファイルとして呼び出してキャッシュさせるほうが良いような）

[退会済みユーザー]

なるほど…。

恥ずかしながらJavaScriptの技術が乏しく、DBとのやりとりは全てPHPでやっております。
それで、動的にページ内容を変更するためにAjaxを利用しておりました。

回避する方法がいくつかあるとのことですが、それについて詳しく教えていただけないでしょうか(;´д｀)

[kei344]

> DBとのやりとり
アコーディオンをJavaScriptで実装するのにDBが関係する箇所はほとんどありませんよ。読み込むHTMLにJavaScriptを書かない方法で実装すればよい、という回答なのですが･･･。

> 回避する方法がいくつかあるとのことですが
リンク先を読みましたか？それでわからないなら実装方法を根本的に変えるほうが早いです。