Как вызвать событие при показе и скрытии только одной страницы в приложении jQuery Mobile - PullRequest
Новая
       31

Как вызвать событие при показе и скрытии только одной страницы в приложении jQuery Mobile

2 голосов
/ 20 августа 2011

Хорошо, поэтому я начинаю работать с jQuery Mobile.Я далек от того, чтобы быть экспертом по JavaScript.jQuery Mobile очень крутой, но он поставил меня в тупик по этому вопросу.

Мне нужно запустить какой-то код, когда отображается определенная страница, а затем другой, когда он скрыт, - но только определенная страница.иерархии.Я знаю, как использовать события pagecreate и pagehow (и использовал их для работы с кодом, который должен запускаться на каждой странице).Однако мне нужно уметь определять, когда отображается конкретная страница и когда она скрыта.

Так что же я пробовал?Я поместил пользовательский атрибут на следующий тег на странице: 

<div data-role="content" myspecialattribute="true">

Затем в событии pagehow я использовал jqmData () для поиска этого элемента.Это было успешно, при первом обнаружении страницы, а затем не работает.Благодаря тому, что JQM загружает страницы, этот тег и этот атрибут всегда находятся в домене, даже если я перехожу на другие страницы, поскольку JQM использует умный ajax для отображения / скрытия страницы.

Я потратил несколько часов на поиски решения, но моих навыков работы с JavaScript просто нет.Я предполагаю, что это легко, поэтому я чувствую себя немного глупо, прося о помощи.

1 Ответ

2 голосов
/ 20 августа 2011

Вам нужно добавить идентификатор на страницу и использовать live live () для запуска необходимого события, например, Live:

JS:

$('#page2').live('pageshow',function(event, ui){
    alert('Alert for page 2 only');
});

HTML: 

<div data-role="page" id="home"> 
    <div data-role="content"> 

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 

    </div>
</div>

<div data-role="page" id="page2"> 
    <div data-role="content"> 

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul> 

    </div>
</div>
...