jQuery の .on でクリックイベントを取得するメモです。
以下で a 要素のクリックイベントを Google Analytics に記録するという記事を書きましたが、取れていないイベントがある事がわかったため修正してみました。
関連記事
取得できないのは、例えば以下のような javascirpt で追加された要素。
1 2 3 4 5 | (function($) { $(function() { $("#hoge").append("<a href='https://worklog.be/' title='work.log' target='_blank'>追加した要素</a>"); });})(jQuery); |
これだと思いっきりスルーされます。調べると .click は描画済みの DOM 要素にしか効かないとか何とかで、これじゃあダメだった様子。
代わりに .on を使うと上手くいくという事で、早速いかのように置き換えてみました。
1 2 3 4 5 6 7 8 9 10 11 12 | (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 のメモ書きは以上です。