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 のメモ書きは以上です。