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

Question

Hello from a javascript n00b.

I'm trying to create my own menu transitions using some basic jquery code.

The idea is that the menu will be visible and when the user clicks "close" the menu will slide off to the left and remain in waiting and when the user clicks "open" the menu will slide back to it's position.

Unfortunately this works for the first clicks and thereafter doesn't. I'd be very grateful if whoever answers this gives me a short explanation as to why it doesn't work as I'm trying my best to learn.

Here's my HTML code

                 <div class="menubar" id="side">

                  </div>

                  <span class="menu close" id="close"></span>
                  <span class="menu open" id="open"></span>

And my 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;
        }

And my 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)
        });

And my jsFiddle:

http://jsfiddle.net/JjqVy/

Thank you very much

Answer 1

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

Answer 2

As its name implies, a function passed to the .one() method will be executed at most once per element per event type. Use .on() instead:

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

Answer 3

use this instead:

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

one will execute it only one :)