メニューから特定の部分だけクリックした時の時間を取得して`cookie`に保管したい

Question

<ul class="header-menu-lists">
    <?php
        $Items = [];
        $Items[]  = [ 'text'=>'a', 'addClass'=>'' ];
        $Items[]  = [ 'text'=>'b-1', 'addClass'=>'header-menu-b-1' ];
        $Items[]  = [ 'text'=>'b-2', 'addClass'=>'header-menu-b-2' ];
        $Items[]  = [ 'text'=>'c', 'addClass'=>'' ];
    ?>
    <?php foreach($Items as $item) { ?>
        <li class="<?php echo $item['addClass'] ?>"><a href=""><?php echo $item['text'] ?></a></li>
    <?php } ?>
</ul>

<script type="text/javascript">
$(function() {
    var name = 'Read_date';
  var now =[];

    $('.header-menu-b-1 a').on('click',function(){
        now['b-1'] = new Date();
    });
    $('.header-menu-b-2 a').on('click',function(){
        now['b-2'] = new Date();
    });
    cookie = name + "=" + now + ";path=/";
    document.cookie = cookie;
        
});
</script>

ヘッダー内にあるメニューから特定の部分だけクリックした時の時間を取得してcookieに保管したいです。
現在、このように記述して見たのですがクリックイベントが上手く取得できません。

ご助力オタだけますでしょうか？

Answer 1

クリックイベントが起きないのはそもそもjsエラーが出ているからですね。

Uncaught ReferenceError: now is not defined

→変数nowが未定義です

jsが動かないときはまずエラーがないかブラウザの開発ツールで確認する癖をつけましょう。

ただ、今のままだとcookieに保存する部分はページ表示時にしか動作しません。

cookie = name + "=" + now + ";path=/";

document.cookie = cookie;

毎回保存したいのであればクッキー保存用のfunctionを作り、クリック時に実行するようにするか、yambejpさんの仰るようにjqueryプラグインを利用されたほうが良いでしょうね。

Comments

[n.t]

now変数は記入漏れでした。
開発ツールではエラーをはいてない状態でクリックイベントが取得できていない状態です。

[m.ts10806]

クリックイベントが取得できないというのは、例えば下記のように書いて
$('.header-menu-b-1 a').on('click',function(){
now['b-1'] = new Date();
alert(1);
});

1がalert出力されないということでしょうか？
ちなみにどれをクリックしたときに発生しないというのはありますか？
私の方では同コードで、b-1,b-2を押したときにイベントは発生しています。
※ブラウザにより動作に差があるかもしれません。画面遷移がないのであればhrefには#!を入れておくと良いです。

[n.t]

Chromeを利用しております。
今までconsole.logを使ってクリックイベントを見ていたのですが
そもそもページ遷移していたらlog残らないですよね。。。

[退会済みユーザー]

クロームのコンソールの設定をよく見てください。残す設定があるはずですが

Answer 2

Aリンククリックするとページが遷移してしまうので、遷移する前にクッキー操作をしなければなりません。たぶん、クリックが反応していないわけではなくてタイミングの問題です。

クッキーの操作はjs-cookie（jquery.cookieの最新版（jquery非依存になってます））が簡単かと思います。

<script type="text/javascript">
$(function() {
    var name = 'Read_date';
    var now  = {};

    var clickSaver = function (node, event) {
        now[node] = new Date();
        //クッキー保存
        Cookies.set(name, now, {'path':'/'});
        //クッキー確認
        console.log(Cookies.getJSON(name));
    });

    $('.header-menu-b-1 a').on('click', function(e){
        clickSaver('b-1', e);
    });
    $('.header-menu-b-2 a').on('click', function(e){
        clickSaver('b-2', e);
    });
});
</script>

Google Chromeでページ遷移前のログを確認したい場合はF12の「consoleタブの設定＞Preserve log」にチェックを入れます。

ページ遷移を止めたい場合は、クリックイベントの中でreturn falseまたは、event.preventDefault()を実行します。

    $('.header-menu-b-1 a').on('click', function(e){
        clickSaver('b-1', e);
        return false;
    });
    $('.header-menu-b-2 a').on('click', function(e){
        e.preventDefault();    //デフォルトイベントを禁止
        clickSaver('b-2', e);
    });

Answer 3

フローはともかく、jQueryを使用する前提であればクッキーも
jquery.cookie.jsに任せたほうが楽だと思います