Parse.com でのログイン/ログアウト時のjQueryの動き

Question

現在、Parse.com のホスティングを利用して、ユーザーアカウントでの
ログイン／ログアウトができるページを作成しております。
以下が現時点でのページとコードです。

ページ：http://stocker.parseapp.com/
コード：http://codepen.io/c2104/pen/yyjZaP

問題は、ログインおよびログアウト直後、
一部のjsファイルでの動きができなくなってしまいます。

---

ページの動きとしては、カーソルを右上の『サインアップ』まで持って行くと、
jQuery(header.js)にてopacityとcursorを変更、クリックするごとにToggleが発生し、
フォームが見え隠れします。

中央のフォームにてログインができます。
ユーザー名：user
パスワード：user

ログインをすると画面がかわり、先ほどの『サインアップ』の部分が、
『ログアウト』へ切り替わります。

---

ここからが本題なのですが、本来『ログアウト』部分には、
header.jsのhoverで、
opacityとcursor変更を定義しているのですが、動きません。
が、F5などで更新をすると、動くようになります。
しかし、クリックをするとログアウトされるので、
stock.jsは動いているものと思われます。

これはログアウト後も同じで、ログアウト後の『サインアップ』部分で、
header.jsのhoverが効いていません。
が、F5などで更新をすると、動くようになります。

---

これの理由がわからず、行き詰っています。
Parse.comやJS、jQueryは最近始めたところで、
内包されているstock.jsやunderscore.jsは、
ほぼ用意されていたテンプレートのままです。

不足している情報などあれば、仰っていただければ追記いたします。
ご教授賜われれば幸いです。
宜しくお願いいたします。

Answer 1

コードを拝見しましたが、import.jsを見ますと、stock.jsが実行されてからheader.jsが実行されているようです。
つまり、<script type="text/template" id="login-template"> や <script type="text/template" id="manage-todos-template"> のテンプレートがレンダリングされてから header.js が実行されています。
ところが、ログアウト動作をした時には <script type="text/template" id="manage-todos-template"> のレンダリングが実行されるのは header.js の実行後になりますから、$('.logout').hover() が実行される際にはまだ $('.logout') が存在しないということになります。

ということですので、こういう場合には jQueryの古いバージョンで言う「ライブイベント」 $(document).on('mouseenter', '.logout' ... のような記述をするのが一般的なのですが、どうやら mouseenterイベントはバブリングしないためこの方法も使えません。
しかし、コードを見る限りではCSSの操作しかしていないので、当該部分のjsを削除し、以下のようにCSSで書いてしまえば問題は解決するのではないかと思いますがいかがでしょうか？

/********** ログアウト **********/
.logout {
    display: block;
    background-color: #777;
    padding: 0 20px;
    font-size: 13px;
    font-weight: bold;
    line-height: 65px;
    letter-spacing: 1px;
    opacity: 0.6;
    cursor: auto;
}
.logout:hover {
    opacity: 1;
    cursor: pointer;
}

なお、$('.logout').click()に関しても動作していないと思いますので、そちらは.on()メソッドを使って書いてみてください。

Comments

[m055001]

Lhankor_Mhy 様

ご回答ありがとうございました！

CSSでのhover、確かにそうですね（汗
jQueryを触り始めてから、「なんとかjQueryを使って！」という気持ちばかりあって、
すっかり抜け落ちてしまっておりました。
お陰で、hoverに関しては、ログインボタン/ログアウトボタン共に解決いたしました。

また、併せてご回答いただいておりました、.click()を.on()メソッドへ書き換えました。
が、ログインボタンに関しては動作させられたのですが、ログアウトがうまく動作
させることができませんでした。

というのも、ログインボタンについては、

　$(document).on('click','.signup-menu',function() {
　　$('ul.child','#signup li').slideToggle(500);
　});

で、親要素をdocumentにしているのでOKなのですが、
ログアウトについては、

　$(document).on('click','.logout',function(){
　　if (!confirm('ログアウトします。\nよろしいですか?')) {
　　　return false;
　　}
　});

とすると、if文より先に #login-template が読まれてしまうため、
ログアウト後の画面が表示された後に、confirm が表示される状態です。

しかし、親要素に .logout の親である .header-right を指定しても、
.logout 同様、.header-right は header.js が読まれる時点では存在しないため、効きません。

何か解決法はございますでしょうか？

調べる中で一つ、力技ですが、表示が切り替わるごとに
document.location.reload(true); でページごと読み込み直すことで、
jsファイルを再度頭から読み込むようにすれば、対応は可能でした。
しかし、もっとスマートなやり方があれば、という気持ちがあります。

[Lhankor_Mhy]

　あ、なるほど、それはたしかに動きませんね。
　stock.js に直接書くべきだと思うのですが、強引にやるなら、Parse.jsよりもイベントバブリングが早い要素でイベントを拾って、event.stopPropergation() でバブリングを止めたのちに、自分自身を殺してからクリックイベントをトリガーすれば動くような気がします。
　が、stock.js を見ると el: ".content" とあり、このライブラリをよく知らないのですが、おそらくこの要素からイベントをデリゲートするでしょうから、どうにも上手くいかなさそうな気がします。

　やはり stock.js に直接書くべきなのでは。

[m055001]

ご回答をいただいたにもかかわらず、返答が遅くなり、申し訳ございません。

色々な案、本当にありがとうございました！
stock.jsに直接書く方法で進めていきたいと思います。

また機会がございましたら、ぜひよろしくお願いいたします！