別のページにナビゲートするとJSメニューが機能しなくなる

Question

JSメニューに問題があります。ページが読み込まれたときにメニューがうまく動作し、期待通りに動作します。オプションをクリックすると、メニュー項目が表示されます。

ただし、メニュー項目の1つをクリックして別のページに移動すると、メニューは機能しなくなります。アイコンをクリックすると、メニューは表示されなくなります。そのページはちょうどそこに座っている。私はクロムでデバッグしようとすると、もはやコードに "ヒット"しません。

私はそのページを更新する場合に予想されるとして、メニューが再び働くことに気づいた：/

私のJSコードは、私が発生するためにこの種の問題のために何をしないのです、以下のでしょうか？

私はこのためのペンを作成している - 以下http://codepen.io/alr3id/pen/bwdKxL

function MyMenus(jQuery) { 
    $(".p-menu-icon").on("click", function(event) { 
    var e = $(this).next(".p-menu"); 
    e.hasClass("p-menu_open") || $(document).trigger("click"), 
    $(".p-modal-bg").toggleClass("p-modal-bg_active"), 
    e.toggleClass("p-menu_open"), 
    event.stopPropagation() 
    }); 

    // Removes the menu open class. 
    $(document).on("click", function(t) { 
    var e = $(t.target) 
     , i = 1 === e.closest("p-menu").length; 
    i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"), 
    $(".p-modal-bg").removeClass("p-modal-bg_active")) 
    }); 
} 

// Load 
$(document).ready(MyMenus); 

メニュー

<nav class="p"> 
    <div class="p-modal-bg"></div> 

    <div class="p-property"> 
    <a class="p-property-name" href="/"> 
     Logo Here 
    </a> 
    </div> 

    <div class="p-user"> 
    <a class="p-menu-icon"> 
     <div class="icon icon-navigator-toggle"></div> 
    </a> 

    <div class="p-menu p-menu_navigator"> 
     <a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a> 
     <a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a> 
     <a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a> 
    </div> 

    <a class="p-menu-icon p-menu-icon_account"> 
     <div class="p-user-avatar_container"> 
     <img alt="Example user" class="gravatar" src="{image here}"> 
     </div> 
    </a> 

    <div class="p-menu p-menu_account"> 
     <div class="p-menu-item_account-details"> 
     <div class="p-user-avatar_container"> 
      <img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}"> 
     </div> 
     <div class="p-account-details-name"> 
      Example User 
     </div> 
     <div class="p-account-details-email">example@example.com</div> 
     </div> 
     <a class="p-menu-item p-menu-item_settings" href="account">Account settings</a> 
     <a class="p-menu-item p-menu-item_messages" href="#">Messages</a> 
     <a class="p-menu-item p-menu-item_logout" href="#">Sign out</a> 

    </div> 
    </div> 
</nav> 

Answer 1

これは私が考慮しなかったものですが、この問題はRailsとTurbolinksの問題です。原因Turbolinksロードページアップ

$(document).ready 

それはネジあなたが使用する必要があり、これを修正する方法に

...

$(document).on "turbolinks:load" 

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Answer 2

ためのHTMLは、あなたがこのページで使用しているJSファイル（新しいページインポートしているありますそれはあまりにもスタック）？別のファイルにコードを追加してみるか、jsコードを別のjsファイルに移動して、そのページにインポートしてください。

Answer 3

新しく読み込まれたページで動作するので、コード自体は問題ではありません。 気になるのは、クラスの変更です。ブラウザのインス​​ペクタを開き、リスナを失うことで解決されるクラス名の変更があるかどうかを確認します。

また、各機能の内側にconsole.log()を入れて、両方のイベントが1つずつ次々と発生しないようにしてください。