두 번째 클릭 후에 JQuery .on ("클릭") 만 실행됩니다.

Question

그래서 메뉴 상자 (매체 메뉴와 유사)를 클릭하여 메뉴에 애니메이션을 적용하려고했습니다. 지금까지 모든 것이 작동하고 JQuery 이벤트가 완전히 새로 고쳐지면 처음으로 아무 문제없이 실행됩니다.

그러나 링크를 클릭하면 페이지로 이동하지만 첫 번째 클릭에는 메뉴 버튼이 작동하지 않지만 두 번째 클릭에는 완벽하게 작동합니다. 이것은 반드시 발생합니다.

나는 이와 비슷한 몇 가지 다른 질문을 보았으나 해결책 중 어느 것도 내 문제를 해결하지 못했습니다. 누구든지 잘못 될 수있는 아이디어가 있습니까? 아, 그리고 Ruby on Rails 4가 전혀 영향을 미치지 않는다면 Ruby on Rails 4도 사용하고 있습니다.

메뉴 버튼의 HTML

<div id="menu-hex"></div> 

메뉴 HTML

<ul> 
    <li> 
     <%= link_to(root_url) do %> 
      <h3 class="am"><span class="icon-home profile-icos"></span> Daily Feed</h3> 
     <% end %> 
    </li> 
    <li class="coming-soon"> 
     <%= link_to(root_url) do %> 
      <h3 class="am"><span class="icon-fire profile-icos"></span> Improve</h3> 
     <% end %> 
    </li> 
    <li class="coming-soon"> 
     <%= link_to(root_url) do %> 
      <h3 class="am"><span class="icon-star profile-icos"></span> Events</h3> 
     <% end %> 
    </li> 
    <li class="coming-soon"> 
     <%= link_to("/login") do %> 
      <h3 class="am"><span class="icon-bookmarks profile-icos"></span> Communities</h3> 
     <% end %> 
    </li> 
</ul> 

CSS

#menu-hex { 
    position: absolute; 
    left: 6px; 
    top: 7px; 
    background-image: url('homehex.png'); 
    width: 65px; 
    height: 65px; 
    background-size: 100%; 
    cursor: pointer; 
    z-index: 20; 

    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: moz-none; 
    -ms-user-select: none; 
    user-select: none; 
} 

JQuery와

var menuOn = false; 
var duration = 250; 

$(document).on("click", "#menu-hex", function(e) { 
    if(menuOn == false) { 
     openMenu(); 
    }else { 
     closeMenu(); 
    } 

}); 

$(document).on("click", ".overlay", function(e) { 
    if(menuOn == true) { 
     closeMenu(); 
    } 

}); 


function openMenu() { 

    $(".overlay").css("display", "block"); 

    $("#focusimage").animate({opacity: 0.2}, duration); 
    $("#spot-content").animate({"left":"-300px"}, duration, function() 
     { $("#spot-content").css("display", "none") }); 

    $("#menu").animate({"left":"25px", opacity: 1.0}, duration); 

    menuOn = true; 
} 

function closeMenu() { 

    $(".overlay").css("display", "none"); 

    $("#focusimage").animate({opacity: 1.0}, duration); 

    $("#spot-content").css("display", "block"); 
    $("#spot-content").animate({"left":"25px"}, duration); 

    $("#menu").animate({"left":"-300px", opacity: 1.0}, duration); 

    menuOn = false; 
} 

Answer 1

답장을 보내 주셔서 감사합니다.

내 문제를 발견했습니다. Rails 4는 터보 링크를 사용합니다. 내 솔루션은 여기에서 찾았습니다 : Rails 4: how to use $(document).ready() with turbo-links

Answer 2

$(document).on("click", ".overlay", function(e) { 
    if(menuOn == true) { 
     closeMenu(); 
    } 

}); 

대신 :

$(".overlay").on("click", function(e) { 
    if(menuOn == true) { 
     closeMenu(); 
    } 
}); 

왜 당신이 사용하고 있습니까?

Answer 3

다음 블록을 바꾸어보십시오. $(document).on("click", "#menu-hex", function(e) { if(menuOn == false || '') 문제는 (내가 잘못하지 않은 경우), 다시로드 한 후 처음 클릭 할 때 menuOn 변수가 설정되지 않아 두 번째 클릭 후에 만 ​​작동합니다.

Answer 4

jQuery를 처음 사용했지만 스크립트가로드 될 때까지 기다리지 않아도되었습니다. 당신은이 방법으로 스크립트를 둘러싼 시도 :

$(document).ready(function(){ 

//your code 

}); 

이 코드에 문제가되지 않을 수도 있습니다,하지만 어쩌면 당신이 그것을 실행하는 방법으로. 나는 그것이 도움이되기를 바랍니다.

이 부분을 확인하십시오. article 도움이 될 것입니다.