传递给jQuery的one(）方法的函数仅在第一次触发事件时执行

Function passed to jQuery's one() method is executed only first time event is triggered

本文关键字：第一次 事件 执行 方法 jQuery one 函数      更新时间：2023-09-26

来自javascript n00b的你好。

我正在尝试使用一些基本的jquery代码创建自己的菜单过渡。

这个想法是菜单将是可见的，当用户单击"关闭"时，菜单将向左滑动并保持等待状态，当用户单击"打开"时，菜单将滑回其位置。

不幸的是，这适用于第一次点击，此后就不行了。如果回答这个问题的人给我一个简短的解释，说明为什么它不起作用，因为我正在尽力学习，我将不胜感激。

这是我的 HTML 代码

                 <div class="menubar" id="side">
                  </div>
                  <span class="menu close" id="close"></span>
                  <span class="menu open" id="open"></span>

还有我的 CSS：

        .menubar
        {
            position:absolute;
            left:0;
            top:0;
            z-index:9;
            height:100%;
            width:350px;
            background:blue;
            display:block;
        }
        .menu
        {
            position:absolute;
            left:360px;
            top:15px;
            z-index:9;
            width:50px;
            height:50px;
            display:block;
            opacity:1 !important;
            cursor:pointer;
        }
        .close
        {
            background:red;
        }
        .open
        {
            left:10px;
            display:none;
            background:green;
        }

还有我的Javascript：

        var $ = jQuery;
            $("#close" ).one( "click", function() {
            $( ".menubar" ).animate({left: "-350px"}, 300, function (){
              });
            $(this).css("display", "none");
            $("#open").css("display","block")
        });

            $("#open" ).one( "click", function() {
            $( ".menubar" ).animate({left: "0px"}, 300, function (){
              });
            $(this).css("display", "none")
            $("#close").fadeIn(300)
        });

还有我的jsFiddle：

http://jsfiddle.net/JjqVy/

谢谢

顾

名思义，传递给 .one() 方法的函数将在每个事件类型的每个元素最多执行一次。请改用.on()：

var $ = jQuery;
$("#close").on("click", function() {
    $(".menubar").animate({left: "-350px"}, 300, function () {
    });
    $(this).css("display", "none");
    $("#open").css("display", "block")
});

$("#open").on("click", function() {
    $(".menubar").animate({left: "0px"}, 300, function () {
    });
    $(this).css("display", "none")
    $("#close").fadeIn(300)
});

只需在JS代码中将.one（）更改为.on（）。

改用这个： 

$(document).ready(function() {
    $("#id").click(function() {
         whatever you want
    });
});

一个人只会执行它一个:)

相关文章：