Differences between jQuery's hide() and .css('display', 'none')?

I've changed a few pages from using generic JavaScript that sets a CSS style property

element.style.display = "none";

to jQuery's method

element.hide();

When the back button is used to return to my page, elements that were hidden using jQuery are no longer hidden. 开发者_开发技巧When I use raw JavaScript to set the display, the hidden elements stay hidden when I return to the page.

Is there a workaround to allow jQuery's hide() function to work the same way?

jQuery's hide method performs

        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

You have some other problem.

The full method is

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

There is a huge difference:
When .hide() is called the value of the display property is saved in jQuery's data cache, so when .show() is called, the initial display value is restored!

It's the same. jQuery hide applies display: none; to the element. What is triggering your hide? Is it in the document.ready?? It seems like when you hit 'back' it does not execute the javascript.