JQuery .on("click") 仅在第二次单击后触发答案

【问题标题】：JQuery .on("click") only firing after second clickJQuery .on("click") 仅在第二次单击后触发
【发布时间】：2013-12-11 22:13:28
【问题描述】：

所以我一直在尝试通过单击菜单框（类似于 Medium 的菜单）来为菜单设置动画。到目前为止，一切正常，并且在完整的页面刷新上，JQuery 事件第一次触发，没有任何问题。

但是，当我单击菜单中的链接时，它会将我带到页面，但是菜单按钮在第一次单击时不起作用，但在第二次单击时却完全正常。这一定会发生。

我查看了其他几个与此类似的问题，但他们的解决方案都没有解决我的问题。有谁知道可能出了什么问题？哦，如果这会影响它，我也在使用 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;
}

【问题讨论】：

现在，setTimeout(set); 到底做了什么？
我忘了从我正在尝试的其他东西中删除它哈哈。哎呀。
尝试设置jsFiddle

标签： jquery

【解决方案1】：

你为什么使用：

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

});

代替：

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

【讨论】：

这是你的最终答案吗？
您可能应该阅读文档中关于委托事件处理程序的章节！
您没有做错，但是您答案中的这两个代码示例都是有效的，它们只是做不同的事情。第一个代表，而最后一个没有。

【解决方案2】：

尝试替换以下块：$(document).on("click", "#menu-hex", function(e) { if(menuOn == false || '') 问题是（如果我没记错的话），在重新加载后第一次单击时，menuOn 变量未设置，因此只有在第二次单击后才有效。

【讨论】：

但是在脚本的顶部显然设置为 false ？

【解决方案3】：

我是 jQuery 新手，但我感觉您的脚本没有等待文档加载。你试过用这种方法包围脚本吗：

$(document).ready(function(){

//your code

});

您的代码可能没有问题，但可能与您执行它的方式有关。希望对你有帮助。

查看article，它可能会对您有所帮助。

【讨论】：

【解决方案4】：

感谢您的回复。

我发现了我的问题。 Rails 4 使用了 turbolinks。我的解决方案在这里找到： Rails 4: how to use $(document).ready() with turbo-links

【讨论】：