CODEWITHSUNDEEP
javascriptjqueryhtmlcss
babusi
babusi

Reputation: 520

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

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

Upvotes: 0

Views: 138

Answers (3)

zxqx
zxqx

Reputation: 5205

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

Upvotes: 3

some amazing person
some amazing person

Reputation: 11

use this instead: 

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

one will execute it only one :)

Upvotes: 1

javakorr
javakorr

Reputation: 76

Simply change .one() to .on() in your JS code.

Upvotes: 3

Related Questions