Нет событий смены страниц - PullRequest
Новая
       12

Нет событий смены страниц

1 голос
/ 27 января 2012

В jQuery mobile я пытаюсь определить успешное изменение страницы на определенную страницу. У меня есть следующий код, встроенный на странице, которую я хочу загрузить. 

<script>
     $(document).bind( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange");   
        });

        $(document).bind( "pagechange", function( e, data ) {
            alert("pagechange");   
        });
        $(document).bind( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed");   
        });
       $(document).live( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange live");   
        });

        $(document).live( "pagechange", function( e, data ) {
            alert("pagechange live");   
        });
        $(document).live( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed live");   
        });
</script>

Я получаю соответствующие предупреждения при прямой загрузке страницы или обновлении, но не при переходе из другой области в приложении Jquery Mobile.

Страница вызывается вкладкой "Ваш автомобиль" в нижнем колонтитуле 

<div  id="footer" data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Features</a></li>
            <li><a href="about.html">Your Car</a></li>
            <li><a href="index.html">Contact</a></li>
        </ul>
    </div>
</div>

Ответы [ 3 ]

2 голосов
/ 27 января 2012

Будет ли работать, чтобы поместить ваш код в событие pagehow? Это может произойти, если вы пытаетесь определить страницу или местоположение. Может быть, что-то вроде этого: 

<script type="text/javascript">

$('[data-role=page]').live('pageshow', function (event, ui) {
   hash = location.hash;
   page = hash.susbtr(1);

   if (page.indexOf('about.html') >= 0) { 
      alert('you made it!'); 
   }
});

</script>

UPDATE

После тестирования этого сценария и перечитывания вашего вопроса, я думаю, я смог воспроизвести результаты.

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

<body>

<div data-role="page">
    <!-- page stuff -->
</div> 

<script type="text/javascript"> ..bind events... </script>
</body>

Однако, когда я перемещаю javascript прямо внутри страницы, он работает как положено и запускает все связанные события, независимо от того, как была достигнута страница: 

<body>

<div data-role="page">

    <script type="text/javascript"> ..bind events... </script>

    <!-- page stuff -->
</div> 

</body>
0 голосов
/ 06 января 2013

Люк думает в правильном направлении: очевидно, что проблема, с которой вы столкнулись, связана с тем, где в коде происходит привязка. Это доказано Шанабусом.

Однако в вашем случае вы должны выполнять привязку, когда запускается событие jQuery mobile mobileinit, а не pageInit, как предлагает Люк.

Пример (срабатывает при всех событиях смены страницы): 

<script type="text/javascript">
    $(document).bind('mobileinit', function() {
        $(document).on('pagechange', function () {
            window.alert('page changed!');
        });
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>

Как показано в приведенном выше коде, помните, что обработчики, запускаемые mobileinit, должны быть включены перед тегом jQuery mobile <script>.

0 голосов
/ 27 января 2012

Куда вы привязываетесь к этим событиям?

Читали ли вы следующие документы в документах http://code.jquery.com/mobile/latest/demos/docs/api/events.html:

Важно: используйте pageInit (), а не $ (document) .ready()

Первое, что вы узнаете в jQuery, - это вызов кода внутри функции $ (document) .ready (), чтобы все выполнялось сразу после загрузки DOM.Однако в jQuery Mobile Ajax используется для загрузки содержимого каждой страницы в DOM во время навигации, а обработчик готовности DOM выполняется только для первой страницы.Чтобы выполнить код всякий раз, когда новая страница загружается и создается, вы можете привязаться к событию pageinit.Это событие подробно объясняется внизу этой страницы.

...