jQuery Mobile multiple external panels

问题

I'm trying to setup two separate external panels in jquery Mobile as follows. One is to display a full menu, the other to display links to social media sites. If I have just one or the other in the .js, that one panel works fine, but if I have them both in the .js, only the panel listed last loads. I'm thinking I need to specify something else besides just different ids.

Is it possible to have two external panels? Thank you so much for any direction!! :)

var panel = '<div data-role="panel" id="fullmenu" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';

$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend(panel);
  $("#fullmenu").panel().enhanceWithin();
});


var panel = '<div data-role="panel" id="social" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="https://www.facebook.com" data-transition="slide"><img src="images/icon-facebook.png" alt="Facebook" class="ui-li-icon ui-corner-none">Facebook</a></li><li><a href="https://twitter.com" data-transition="slide"><img src="images/icon-twitter.png" alt="Twitter" class="ui-li-icon ui-corner-none">Twitter</a></li></ul></div>';

$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend(panel);
  $("#social").panel().enhanceWithin();
});

回答1:

This code worked for me

 $(document).on("pagecreate", ".demo-page", function() {
var panell = '<div data-role="panel" id="left-panel" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';
  $.mobile.pageContainer.prepend(panell);
  $("#left-panel").panel().enhanceWithin();

  var panelr = '<div data-role="panel" id="right-panel" data-position="right" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';
  $.mobile.pageContainer.prepend(panelr);
  $("#right-panel").panel().enhanceWithin();
});

来源：https://stackoverflow.com/questions/25110638/jquery-mobile-multiple-external-panels