jQueryで後から追加した要素でもクリックイベントを取得するメモ

jQuery の .on でクリックイベントを取得するメモです。

以下で a 要素のクリックイベントを Google Analytics に記録するという記事を書きましたが、取れていないイベントがある事がわかったため修正してみました。

関連記事

Google AnalyticsのクリックカウントをjQueryで簡単に記録する

取得できないのは、例えば以下のような javascirpt で追加された要素。

(function($) {
	$(function() {
		$("#hoge").append("<a href='https://worklog.be/' title='work.log' target='_blank'>追加した要素</a>");
	});
})(jQuery);

これだと思いっきりスルーされます。調べると .click は描画済みの DOM 要素にしか効かないとか何とかで、これじゃあダメだった様子。

代わりに .on を使うと上手くいくという事で、早速いかのように置き換えてみました。

(function ($) {
	$(document).on("click", "a", function(e) {
		var href = $(this).attr("href");
		var url  = href.match(/^https?:\/\/[^/]+/i) + '/';
		if (url != null) {
			var domain = url.replace(/(^https?:\/\/|\/$)/gi, '');
			if (domain != location.host && domain != null) {
				_gaq.push(['_trackEvent', 'Click Count', domain, location.pathname, 1, true]);
			}
		}
	});
})(jQuery);

PC・iPhone でテストしましたが、これで期待通りの動作になりました。

すっごい簡単ですが .on のメモ書きは以上です。