导航到其他页面时 JS 菜单停止工作

Question

我的 JS 菜单有一些问题。当页面加载时，菜单效果很好，并且符合预期。单击该选项，然后它会显示菜单项。

但是，一旦我单击其中一个菜单项并导航到另一个页面，菜单就会停止工作！当您单击该图标时，菜单不再出现。页面就在那里。当我尝试在 chrome 中调试时，它不再“命中”代码。

我注意到，如果我刷新该页面，菜单会再次按预期工作：/

我的 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);

下面是菜单的 HTML

<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

您是否也导入了您在此页面（卡住的新页面）中使用的 JS 文件？尝试将代码也添加到另一个文件中，或者将您的 js 代码移动到另一个 js 文件并在该页面上导入它。

Answer 3

由于它适用于新加载的页面，因此代码本身应该不是问题。 想到的是班级变化。打开浏览器的检查器并检查是否有任何类名更改可以解决丢失侦听器的问题。

还可以尝试在每个函数中添加一些 console.log()，以确保两个事件不会一个接一个地被触发。