外部面板上的jQuery Mobile隐藏元素

Question

我使用以下技术从HTML加载外部面板：

Load External Panel To Jquery Mobile Page

我在面板中定义了一个类：

class="signedin"
class="signedout"

根据以下代码，我隐藏了面板中的元素：

function checkStatus() {
    var status = localStorage.getItem("username");
    console.log(status);
    if (status) {
        $('.signedout').hide();
        $('.signedin').show();
        $('#user_name_display').text("Welcome " + status);
    } else {
        $('.signedout').show();
        $('.signedin').hide();
    }
}

从外部加载面板会破坏元素的隐藏。在pagebeforecreate（）期间加载面板。我已经尝试在pageshow上添加checkStatus函数，但它仍然无法隐藏元素：

$(document).on("pageshow", function () {
  $("body > [data-role='header']").toolbar();
  $("body > [data-role='header'] [data-role='navbar']").navbar();
  // Set based on whether a user is logged in
  checkStatus();
});

编辑：

我也试过了panel.beforeopen（）：

$(document).on("pagebeforecreate", function () {
$( "#settings-panel" ).panel({
  beforeopen: function( event, ui ) {
      checkStatus();
  }
});
});

如何根据checkStatus函数隐藏外部面板上的元素？