JQuery css function not persisting its change

Question

I have a "button-bar" div that I only want to show once the user has clicked on a "settings" button. I have set the button-bar div to display:none in my css. Unfortunately, when the settings button is clicked, the div shows up for a split second, then goes away. Does anyone know why this might be happening? My current code:

$(document).ready(function() {
    $('#settings').on('click', function() {
        $('#button-bar').css('display', 'inline-block');
    });
});

Mark · Accepted Answer · 2014-06-26 01:36:02Z

1

The problem is your href="" are empty, it is reloading the page. Put hashtags in them. href="#"

answered Jun 26, 2014 at 1:36

Mark

4,8718 gold badges58 silver badges93 bronze badges

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

Comments

Mark · Accepted Answer · 2014-06-26 01:27:01Z

0

$(document).ready(function() {
    $('#settings').on('click', function() {
        $('#button-bar')show();
    });
});

or maybe

$(document).ready(function() {
        $('#settings').click(function() {
            $('#button-bar')show();
        });
    });

answered Jun 26, 2014 at 1:27

Mark

4,8718 gold badges58 silver badges93 bronze badges

5 Comments

Mark Over a year ago

This should work, although the .css("","") should have too. If this does not work, try posting a fiddle with more of your code, could be something else, not just this function.

Skitterm Over a year ago

It appears to have the same problem -- it shows for a split second right after I release my mouse button and then disappears.

Mark Over a year ago

have you tried .click(function() instead of .on("click" function() ??

Skitterm Over a year ago

I have; it has the same issue. I've been told the .on() function was more elegant so I went with that.

Mark Over a year ago

You are going to have to post more of your code in a fiddle, there should be nothing wrong with any of this.

RichardB · Accepted Answer · 2014-06-26 01:43:49Z

0

You need to add a "return false;" at the end of your function, otherwise it follows the html link, which is empty.

(edit: The href="#" will work to fix your error, but it will also make the page jump to the top when clicked. The return false; will stop this happening if that is a problem. )

answered Jun 26, 2014 at 1:43

RichardB

2,7891 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery css function not persisting its change

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related