다른 페이지로 이동할 때 JS 메뉴가 작동하지 않습니다.

Question

JS 메뉴에 문제가 있습니다. 페이지가 메뉴 작업을로드 할 때 예상대로 잘 작동합니다. 옵션을 클릭하면 메뉴 항목이 표시됩니다.

그러나 메뉴 항목 중 하나를 클릭하고 다른 페이지로 이동하면 메뉴가 작동을 멈 춥니 다. 아이콘을 클릭하면 메뉴가 더 이상 나타나지 않습니다. 페이지가 바로 거기에 있습니다. 크롬에서 디버그를 시도 할 때 더 이상 코드에 "안타"하지 않습니다. 무엇을 내가 발생하는 문제 이런 종류의 실종,/

내 JS 코드는 다음과 같습니다 :

난 내가 그 페이지를 새로 고침하면 메뉴가 예상대로 다시 작동하는 것으로 나타났습니다?

나는 이것을 위해 펜을 만들었습니다 - 아래

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

http://codepen.io/alr3id/pen/bwdKxL는이 페이지에서 사용하는

<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

글쎄, 이건 내가 생각조차하지 않은 것인데,이 문제는 레일스와 터보 링크에 달려있다.

인해 방식은 더가는 것을 조금 설명

$(document).ready 

당신이 사용할 필요가이 문제를 해결하기까지 그 나사 ...

$(document).on "turbolinks:load" 

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

Answer 2

당신이 JS를 가져온 메뉴 파일의 HTML (새 페이지입니다 그것도 붙어있다)? 다른 파일에도 코드를 추가하거나 js 코드를 다른 js 파일로 옮기고 해당 페이지로 가져 오십시오.

Answer 3

새로로드 된 페이지에서 작동하므로 코드 자체가 문제가되지 않아야합니다. 클래스 변경이 마음에 듭니다. 브라우저의 속성을 열어 청취자를 잃어 버리면 해결할 클래스 이름이 변경되었는지 확인하십시오.

각 기능을 내부에 두어 두 이벤트가 차례대로 실행되지 않도록하십시오.