Ограничить JQM Panel только одним экземпляром на странице

Question

Я разрабатываю тему JQM, используя отдельные страницы. У меня также есть боковая панель / панель, которая построена как отдельный HTML-файл. Эта панель импортируется на страницу JQM с использованием следующего JS;

/* 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 событие будет генерироваться на каждой странице, но только ОДИН РАЗ. Если у вас есть 5 страниц в одном HTML-файле (многостраничная модель), это событие сработает 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, поэтому вам нужно будет улучшить/_initialize_ панель после загрузки jQM.

   <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>
   

   демонстрация