Как запустить функцию обратного вызова после того, как $ .mobile.changePage готов в jquery? - PullRequest
Новая
       1

Как запустить функцию обратного вызова после того, как $ .mobile.changePage готов в jquery?

7 голосов
/ 17 февраля 2012

в этом проекте я использую jquery и phonegap

У меня есть ссылка, которая при нажатии изменяет страницу: 

$('#statsButtonmain').on('click', function() {
        $.mobile.changePage("stats.html", { transition: "slideup"}, true, true);  
});

это работает нормально, но я хотел бы запустить функцию (playMusic()), когда переход сделан, что-то вроде этого: 

$('#statsButtonmain').on('click', function() {
        $.mobile.changePage("stats.html", { transition: "slideup"}, true, true);  
            playMusic();
});

я обнаружил, что на показанной странице происходит событие pageshow, которое запускается после завершения перехода, но я не уверен, как его использовать

похоже, это не работает, есть идеи?

Спасибо

1 Ответ

4 голосов
/ 17 февраля 2012

Я мало занимался разработкой мобильных приложений на jQuery, так что это может быть не самым эффективным решением. Как вы сказали, событие pageshow - это то, что вам нужно использовать. Вот 2 HTML-файла, которые я запускал локально, в которых я вижу предупреждение после завершения перехода на страницу stats.html. .live() привязано к событию страницы pageshow элемента #stats.

HTML

(сохранено как index.html) 

<!doctype html> 
<html> 
  <head> 
    <title>Home</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#statsButtonmain').on('click', function() {
           $.mobile.changePage('stats.html', { transition: 'slideup'}, true, true);  
        });

        $('#stats').live('pageshow', function(event, ui) {
          playMusic();
        });

        function playMusic() {
          alert('playing music');
        }
    });
    </script>
</head> 
<body>
<div data-role="page" id="home">
    <div data-role="header">
       <h1>Callback test</h1>
    </div>
    <div data-role="content">
      <a href="#" id="statsButtonmain">click me</a>
    </div>
</div>
</body>
</html>

(сохранено как stats.html) 

<!doctype html> 
<html> 
  <head> 
    <title>Stats</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
</head> 
<body>
<div data-role="page" id="stats">
    <div data-role="content">some stats</div>
</div>
</body>
</html>
...