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

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

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

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（）方法：

---

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

如果在加载面板之前运行

checkStatus（）

，它将不起作用，因为在运行该函数时，要显示/隐藏的元素在DOM中不存在。加载面板后运行函数。我在这里添加了一些细节。我正在pageshow上运行checkStatus（）。我还尝试在pagebeforecreate上的.get html函数之后运行它。能否在面板的beforeopen或open事件上运行checkStatus（）：我在pagebeforecreate函数内外都尝试过，但仍然没有效果。

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