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

Question

我有一个使用jQuery mobile创建的小型移动应用程序。 关键是我有一个带3个按钮的div，以及其他一些东西。 如果用户正在使用的设备是Windows（即WP），则我希望该div上的三个按钮被隐藏。 它们的定义如下：

<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>

在JS端，我有这样的代码：

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

关键是它似乎不起作用。 当用户打开ID为“ finalPage”的页面时，我希望这三个按钮被隐藏（不可见，不可单击）。 另请注意，在WP设备上，执行console.log行。 只有按钮没有被隐藏。 任何想法，如何实现呢？

Answer 1

尝试这个：

现场演示

JQuery的

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