bind a click event to from within a function that runs the same function

Question

Basically I've created a sliding menu using jquery.

See code below...

menu_slide = function (e) {

    e.preventDefault();

    if ( menuOpen == false ) {

        $('.pane').animate({
            'top' : $('#navigation ul').outerHeight() + 'px'
        }, 250 );
        menuOpen = true;

        $('#top').bind( "click", menu_slide ); 

    } else if ( menuOpen == true ) {

        $('#top').unbind("click");

        $('.pane').animate({
            'top' : 0 + 'px'
        }, 250 );
        menuOpen = false;

    }
}

Fired by this...

$("a.menu-button").on( "click", menu_slide );

Now when my menu opens, I would like to bind a click event to the the div#top so that div area acts as a button to close the menu. But the menu close I would like to remove it.

I thought my method of using...

$('#top').bind( "click", menu_slide );

Then removing it using...

$('#top').unbind("click");

would have the desired effect. But what happens is when I open the menu it just closes straight away.

And it's all because of this line... $('#top').bind( "click", menu_slide );

Can anyone advise on where I'm going wrong?

@bic you mean $('#top').on( "click", menu_slide ); - yes it does exactly the same, but it does not make sense why it closing straight away — Joshc
– Joshc, Commented Feb 25, 2014 at 17:22
I meant $.one(). It's a special use case for binding a single execution handler. See my answer below for details. — Bic
– Bic, Commented Feb 25, 2014 at 17:27

Bic · Accepted Answer · 2014-02-25 17:24:23Z

1

It sound like your a.menu_button elements are embedded inside your div#top:

<div id='top'>
    <a class='menu_button'></a>
    <a class='menu_button'></a>
    <a class='menu_button'></a>
</div>

If this is the case, then when you click on the menu_button, and bind a click event to top in the handler, the original menu_button click is propagating up, and subsequently triggering the div#top click event as well. See Fiddle.

In order to prevent this, you need to stop propagation of the a.menu_button click. You can do this by:

return false; // stops propagation AND prevents default

or

e.stopPropagation(); // stops propagation

See Fiddle

Note, my demo makes use of $.one() to bind to the top div. This method binds a handler to the event that will only execute one time, and then automatically will unbind itself afterwards. This is handy for when you want to handle a single event, and don't want to have to worry about unbinding it manually.

answered Feb 25, 2014 at 17:24

Bic

3,13420 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshc Over a year ago

Works like magic. Indeed you we're right I was just making a fiddle to replicate my issue. Thank you so much indeed for pointing this out and explaining. Thanks

Andrew Burgess · Accepted Answer · 2014-02-25 17:24:14Z

0

Is there any reason to bind the event when the menu is opened? Can $('#top') be clicked when the menu is closed?

I think you would be better off just binding them both right from the start

$('a.menu-button, #top').click(menu_slide);

And then get rid of the $.bind() and $.unbind() calls.

Since you are already checking a variable to see if the menu is opened or closed, clicking either one should function correctly, and I'm assuming the #top element is hidden when the menu is closed.

answered Feb 25, 2014 at 17:24

Andrew Burgess

5,2965 gold badges34 silver badges37 bronze badges

Collectives™ on Stack Overflow

bind a click event to from within a function that runs the same function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related