将JQM Panel限制为仅限页面上的1个实例

Question

我正在使用单页开发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＆amp; amp; JQM，但我的印象是使用

$(document).one

意味着事件每页只发生一次，因此会阻止我遇到的问题。

如果你能帮我弄清楚如何防止这个问题，我真的很感激。

Answer 1

pagebeforecreate事件将在每个页上发出，但仅限ONCE。如果您在一个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 */ } }); 重复相同的代码，则代码将再次执行。

替代方法：

1. 检查是否在添加面板之前添加了面板。

   mobileinit

     

   <强> Demo

2. 使用<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> ，因为每个文档/框架触发一次。加载jQM之前会触发此事件，因此在加载jQM后，您需要增强 / _ initialize_面板。

   {{1}}

     

   <强> Demo