2016-12-12 2 views
1

Я использую jQuery Mobile 1.4.5. Когда я загружаю страницу и сразу же нажимаю кнопку переключения мобильного меню, открывается меню мобильного телефона. Когда я меняю страницы, мобильное меню больше не открывается, когда я нажимаю кнопку переключения.Событие больше не доступно после изменения страницы в jQuery Mobile

Мой навигации выглядит следующим образом:

<div data-role="header"> 
    <div data-role="navbar"> 
     <ul> 
     <li><a href="{{ url('_my_page_1') }}">Page 1</a></li> 
     <li><a href="{{ url('_my_page_2') }}">Page 2</a></li> 
     <li><a href="{{ url('_my_page_3') }}">Page 3</a></li> 
     </ul> 

     <a id="toggle-mobile-menu" href="javascript:void(0)" data-role="none"> 
     Toggle mobile menu 
     </a> 

     <ul id="mobile-menu"> 
     // ... 
     </ul> 
    </div> 
</div> 
<div data-role="content"></div> 
$(function() { 
    $(document).on('click','#toggle-mobile-menu', function() { 
      $('#mobile-menu').fadeToggle(); 
    }); 
}); 

Как мне нужно адаптировать свой код?

+0

Ваш код l хорошо. Вы уверены, что этот код доступен всем страницам? Вы пытались помещать точки останова на этот код и проверять, вызывается ли он при нажатии на кнопку? – Medard

+0

@ Медард Да, я уверен. Даже если я поместил код сценария в свой div div, меню для мобильных устройств открывается только после загрузки начальной страницы в моем браузере, но не после смены страниц с помощью навигации (обратите внимание: контент загружается через ajax, так как это jQuery Mobile). – Max

+0

'$ (document) .on (" pagecreate ", function() {$ (" menu "). Off (" click "). On (" click ", function() {do something}});' – Omar

ответ

0

Используйте только одну внешнюю панель инструментов и поместите разметку вне страницы в пределах тела вашей страницы. Это легко: разметка остается прежней. Не забудьте инициализировать панель инструментов: поскольку внешние панели инструментов находятся не внутри страницы, вы должны вызвать плагин панели инструментов самостоятельно.

В $(document).ready добавить следующее:

$(function(){ 
    $("[data-role='header'], [data-role='footer']").toolbar(); 
}); 

Вот JQuery Mobile документация по этой теме:

http://demos.jquerymobile.com/1.4.5/toolbar-external/

и здесь для фиксированных панелей инструментов:

http://demos.jquerymobile.com/1.4.5/toolbar-fixed-external/

Смежные вопросы