Javascript 在第页上将JQM面板限制为仅1个实例

我正在使用单页开发一个JQM主题。我还有一个侧栏/面板，它构建为一个单独的html文件。使用以下JS将此面板导入JQM页面

/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
  $.get('left-panel.html', function(data){ 
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");
});   

我把这个脚本放在一个js文件中，加载在每个页面的底部，因为“移动站点”的用户可以通过任何页面进入

我通过Firebug注意到，我导航到的每个页面似乎都添加了一个面板实例。因此，如果我访问3页，面板将加载3次，4页=4个面板，以此类推

公平地说，我在JQ&JQM方面是个新手，但我的印象是

$(document).one

这意味着事件每页只发生一次，因此可以防止我遇到的问题

---

如果您能帮助我解决如何防止此问题，我将不胜感激。

在每个页面上都会发出

pagebeforecreate

事件，但只会发出一次。如果一个HTML文件（多页模型）中有5个页面，则在创建/显示目标页面之前，该事件将触发5次

无法将此事件委派给特定页面，例如，以下代码无效

$(document).on("pagebeforecreate", "#pageX", function (event) {
  /* do something to pageX */
});

与

pagecreate

不同，它可以委托给特定页面

$(document).on("pagecreate", "#pageX", function (event) {
  /* use it to add listeners */
});

但是，您可以获取正在创建的页面的对象

$(document).on("pagebeforecreate", function (event) {
  var page = event.target.id;
  if ( page == "pageX") {
    /* do something to pageX */
  }
});

---

为什么

.one（）

？ 由于无法委派

pagebeforecreate

并在每个页面上激发，因此使用

.one（）

将只运行代码一次。但是，如果使用

.one（）

重复相同的代码，该代码将再次执行

替代方法：

在添加面板之前，请检查面板是否已添加

$(document).one('pagebeforecreate', function () {
    var panelDOM = $("[data-role=panel]").length;
    if (panelDOM === 0) {
        /* add panel */
    } else {
        /* nothing */
    }
});

在每个文档/框架触发一次mobileinit时，请使用

mobileinit

。此事件在加载jQM之前激发，因此您需要在加载jQM后增强/\u initialize\u面板

<script src="jquery-1.9.1.min.js"></script>
<script>
    /* inject panel */
    $(document).on("mobileinit", function() {
        var panel = '<div>panel</div>';
        $("body").prepend(panel);
    });
</script>
<script src="jquery.mobile-1.4.2.min.js"></script>
<script>
    /* initialize it */
    $(function() {
        $("[data-role=panel]").panel().enhanceWithin();
    });
</script>

/*注入面板*/
$（文档）.on（“mobileinit”，函数（）{
变量面板=‘面板’；
$（“正文”）。预编（小组）；
});
/*初始化它*/
$（函数（）{
$（“[data role=panel]”）.panel（）.enhanceWithin（）；
});

---

pagebeforecreate

将在每页触发一次，我使用了

.one（）

来捕获第一个

pagebeforecreate

来运行代码。检查这个，firebug it，你会发现两个面板另一种方法是在

mobileinit

上注入面板，不管页面数多少，每个文档/框架都会触发一次

mobileinit

在加载jQM之前激发，注入一个面板，然后在加载jQM之后初始化它有很多方法，1）

mobileinit

如我前面的评论所示。2） 内部

pagebeforecreate

检查DOM中是否存在面板

var panelDOM=$（“[data role=panel]”）如果==
0
添加面板，如果>
0
，请不要添加。谢谢。一如既往。。谢谢我的荣幸：）这是第二种方法，你不能这么做，你说呢$（#pageX”）。在（“pagebeforecreate”，function（event）{……}@red上，你是什么意思？对不起，我应该说得更清楚。在答案的顶部，您这样说：“此事件不能委派到特定页面，例如，下面的代码将不起作用。”您也可以这样说您的代码。但是我们不能像这样绑定到特定的“pagebeforecreate”吗$（#pageX”）。在（“pagebeforecreate”，函数（事件）{…}）上。谢谢@Red2678
$（文档）。在（“pagebeforecreate”和“pageID”上，函数（）
您需要委派它。