隐藏功能在jQuery Mobile中似乎不起作用

Question

I have a small mobile app that is created using jQuery mobile. The point is that I have a div with 3 buttons, and some other stuff. If the device that the user is working is Windows (meaning WP), I want the three buttons on that div to be hidden. They are defined like this:

<div id="finalPage" data-role="page" data-add-back-btn="false">
            <div data-role="header" data-position="fixed" data-tap-toggle="false">
                <h1>Result</h1>
            </div>
            <div data-role="content">
                 <button id="fbPost">Facebook</button>
                 <button id="twitterPost">Twitter</button>
                 <button id="g+Post">Google+</button>
            </div>
</div>

On JS side I have a code like this:

document.addEventListener("deviceready", WPshare, false);

function WPshare() {
    if (navigator.userAgent.indexOf('Windows') > -1) {
        console.log("The device is Windows Phone!");
        $("#fbPost").hide();
        $("#twitterPost").hide();
        $("#g+Post").hide();
    }
}

The point is that it doesn't seem to be working. When the user opens the page with the id "finalPage", I want those three buttons to be hidden (not visible, not clickable). Please also note that on WP devices the console.log line is executed. Only the buttons are not hidden. Any idea, how to achieve it?

Answer 1

Try this:

Live demo

JQuery

    if($('#finalPage').length != 0){
        console.log('final is found');
        $("#fbPost").closest('div').hide();
        console.log($("#fbPost"));
    }