AjaxでJavaScriptのファイルを取得する

jQueryのAjaxでJavaScriptのファイルを取得してみます。

サンプルコード

取得したJavaScriptファイルはそのまま実行されてしまうので、意図しない動作にならないよう注意が必要です。

HTML

<button id="get">script.jsを取得</button>
<button id="btn">script.js取得後にイベントが追加されるボタン</button>

JavaScript

$(function() {
	$('#get').on('click', function() {
		$.ajax({
			type : 'GET',
			url: 'script.js',
			dataType: 'script',
			success: function(data) {
				console.log(data);
			}
		});
	});
});

script.js(取得するファイル)

alert('読み込みました。');
$(function() {
	alert('$(fn)内');
	$('#btn').on('click', function() {
		alert('ボタンをクリックしました。');
	});
});

script.js内のalert()と#btnへのイベント追加が行われました。
AjaxでJavaScriptのファイルを取得するデモページ
　

【参考サイト】

• Ajaxリクエスト（非同期通信）を使ってjsファイルを読込み実行してみる