GOzijQuery クリックイベントを３段階に分けたい

Question

前提・実現したいこと

ビジュアルで言うと、下記のイメージです。
①ロゴをクリック　→ 右回りに永遠に回転
②右回りしているロゴをクリック　→ 逆回りに回転して元の状態に戻る
③　①に戻る

↑は、下記の処理をすると認識してます。
①.logoをクリックすると、.rotateが付与される（右回りに動く）
②.logo.rotateをクリックすると、.rotateが消え、.rotate-backが付与される。（逆回りで戻る）
③.logo.rotate-backをクリックすると、.rotate-backが消え、.rotateが付与される（右回りに動く）

発生している問題

①は出来るのですが、色々試しても②以降が出来ません。
お力添え頂きたいです。

（PCはホバーイベントで処理しており、実現できています。）

該当のソースコード

<div class="logo-wrapper">
   <img class="logo" src="img/[e-mail]" alt="">
</div>

$(function() {
    /*　pc ウィンドウサイズ769以上 */
    if (window.matchMedia('(min-width: 769px)').matches) {
        $(".logo").hover(
            function() {
                $(".logo").addClass("rotate");
            },
            function() {
                if ($(this).hasClass("rotate")) {
                    $(this).removeClass("rotate");
                    $(this).addClass("rotate-back");

                } else {
                    $(this).removeClass("rotate-back");
                }
            });
    }
    //  まだ実現できていないところ
    else if (window.matchMedia('(max-width:768px)').matches) {
        /* ウィンドウサイズ768以下の処理を記述 */
        $(".logo").click(function() {
            if ($(this).length) { // クリックされた要素が.logoのみだった場合
                $(this).addClass("rotate"); // .rotateを追加
            } else if ($(this).hasClass("rotate")) {// クリックされた要素に.rotateがある場合
                $(this).removeClass("rotate");// .rotate削除
                $(this).addClass("rotate-back");//.rotate-backを追加
            } else {//クリックされた要素に.rotate-backがある場合
                $(this).removeClass("rotate-back");// .rotate-back削除
            }
        });
    }
})

Answer 1

動的に追加した要素に対してイベントを発生させるには、$(document).on　を使わなければダメみたいです。

Answer 2

動的に追加した要素に対してイベントを発生させるには、$(document).on　を使わなければダメみたいです。

下記で解決しました。

$(function() {
    /*　pc ウィンドウサイズ769以上 */
    if (window.matchMedia('(min-width: 769px)').matches) {
        $(".logo").hover(
            function() {
                $(".logo").addClass("rotate");
            },
            function() {
                if ($(this).hasClass("rotate")) {
                    $(this).removeClass("rotate");
                    $(this).addClass("rotate-back");
                }
            });
        $(document).on("mouseenter", ".rotate-back", function() {
            $(".logo").removeClass("rotate-back");
            $(".logo").addClass("rotate");
        });
    } 
 /*　pc ウィンドウサイズ768以下 */
else if (window.matchMedia('(max-width:768px)').matches) {
        $(document).on('click', '.logo', function() {
            $(".logo").addClass("rotate");
        });
        $(document).on('click', '.rotate', function() {
            $(".logo").addClass("rotate-back");
        });
        $(document).on('click', '.rotate-back', function() {
            $(".logo").removeClass("rotate-back");
        });

    }
})

Answer 3

クリックされた要素がclickedクラスだったら

の意味がいまいちピンと来ていませんが
この部分

if ($(this).length){ // クリックされた要素がclickedクラスだったら

こういうことでしょうか？

if ($(this).hasClass("clicked")){// クリックされた要素がclickedクラスだったら

Comments

[ron]

コメントありがとうございます！
申し訳ございません。

// クリックされた要素がclickedクラスだったら
→このコメント、コピペしたのがそのままでした。
全く関係ないですね・・・

一つ一つにしたい処理をコメントアウトしました。
（そもそも処理方法が誤っていたら意味ないですが・・・）