JQuery .on（「click」）僅在第二次點擊後觸發

所以我一直試圖通過點擊菜單框（類似於Medium菜單）來設置菜單的動畫效果。到目前爲止，一切正常，並在一個完整的頁面刷新JQuery事件第一次觸發沒有任何問題。JQuery .on（「click」）僅在第二次點擊後觸發

但是，當我點擊菜單中的鏈接時，它會帶我到頁面，但菜單按鈕在第一次點擊時不起作用，但在第二次點擊時它完全正常。這種情況不會發生。

我已經看過其他幾個類似的問題，但他們的解決方案都沒有解決我的問題。有沒有人有任何想法可能會出錯？哦，我也在使用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; 
}

來源

2013-12-11 div

現在，究竟是什麼'setTimeout（set）;'做？ – adeneo

我忘了從別的東西中刪除那個我正在嘗試哈哈。 Woops。 – div

嘗試設置[jsFiddle]（http://jsfiddle.net） – adeneo

感謝您的回覆。

我發現了我的問題。這就是Rails 4使用turbolinks。我的解決方案在這裏找到： Rails 4: how to use $(document).ready() with turbo-links

來源

2013-12-11 22:57:50 div

而不是

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

});

：

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

爲什麼你使用的？

來源

2013-12-11 22:16:22 vrunoa

這是您的最終答案嗎？ – adeneo

耶！我總是使用第二個代碼，你試過了嗎？ – vrunoa

您應該閱讀文檔中關於委派事件處理程序的章節！ – adeneo

嘗試替換以下塊：$(document).on("click", "#menu-hex", function(e) { if(menuOn == false || '')問題是（如果我沒有錯），重新加載後的第一次點擊，menuOn變量未設置，所以它只能在第二次點擊後才起作用。

來源

2013-12-11 22:27:32 n1kkou

但是腳本頂部顯然設置爲false？ – adeneo

我是新來的jQuery，但我感覺你的腳本不在等待文檔加載。你嘗試過用這種方法周圍的腳本：

$(document).ready(function(){ 

//your code 

});

有可能不是你的代碼中的問題，但也許你正在執行的方式。我希望它有幫助。

檢查這個article它可能會幫助你。

來源

2013-12-11 22:44:18

JQuery .on（「click」）僅在第二次點擊後觸發

回答

相關問題