work.log

エンジニアの備忘録的ブログ

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

投稿:2013-10-11 21:09  更新:

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

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

関連記事

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

取得できないのは、例えば以下のような 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 のメモ書きは以上です。

スポンサーリンク

コメント

コメントを残す

よく読まれている記事

  • 今日
  • 週間
  • 月間