将JQM Panel限制为仅限页面上的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 

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

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

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()重复相同的代码，则代码将再次执行。

替代方法：

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

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

   演示

2. 使用mobileinit因为每个文档/框架触发一次。 在加载jQM之前会触发此事件，因此在加载jQM后需要增强 / _initialize_面板。

   演示