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

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

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

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

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

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

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


javascript jquery jquery-mobile jquery-selectors
person iandotkelly    schedule 19.08.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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>
person Phill Pafford    schedule 19.08.2011
comment
Привет, спасибо за быстрый и подробный ответ. Я попробую это сделать и вернусь к вам. - person iandotkelly; 20.08.2011
comment
Одна из сложностей, которые у меня есть, заключается в том, что я использую механизм компоновки (Razor) с файлом _layout.cshtml, как и с обычным div страницы, поэтому я надеялся использовать div содержимого для этого. Но если это сработает, я могу отказаться от общего файла макета. - person iandotkelly; 20.08.2011
comment
+1, Проверить. Что ж, отлично сработало, спасибо. Да, мне нужно было переместить div страницы с главной страницы макета, но это сработало нормально. Спасибо. - person iandotkelly; 20.08.2011