jQuery Mobile: событие pagecreate не вызывается при переходе от страницы к странице - PullRequest
Новая
       0

jQuery Mobile: событие pagecreate не вызывается при переходе от страницы к странице

1 голос
/ 17 ноября 2011

игра с 2 простыми страницами и jQuery Mobile.

Попытка выполнить несколько js при каждой загрузке страницы.Например, показать alert (1) для первой страницы и alert (2) для второй.При первой загрузке страницы в браузере (или обновлении F5) она ведет себя как ожидалось.Однако, когда я перехожу со страницы 'one' на страницу 'two' с помощью link - alert (2) не отображается.

Способ, которым я хочу выполнить некоторые js при каждой загрузке, описан здесь - http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html - используя pagecreate.

Я нашел несколько подобных вопросов здесь, но они не отвечают на то, что мне нужно.Мой вопрос - что я должен изменить, чтобы это работало?

Мои файлы здесь:

one.html: 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>1</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent1').live('pagecreate',function(event){
        alert(1);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent1">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

two.html 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>2</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent2').live('pagecreate',function(event){
        alert(2);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent2">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

Ответы [ 3 ]

3 голосов
/ 22 января 2013

Вы можете сделать это автоматически с помощью всего одного .live ('pageinit'), как показано ниже. 

$('[data-bind="pageinit"]').live('pageinit', function (event) {
    alert( $('[data-role="page"]').attr('id') );
});

Это автоматически свяжет страницу при использовании атрибута data-bind='pageinit'. В предупреждении должен быть указан идентификатор страницы, на которой должен присутствовать data-role="page".

РЕДАКТИРОВАТЬ 1 марта 2013

Видя, что за другие вопросы голосуют с кодом, который, несомненно, потребует повторения кода, я подумал обновить свой ответ следующим образом: Введите вышеуказанный код перед инициализацией jQuery Mobile. Каждая страница будет привязана при первой загрузке (например, при событии pageinit. У вас в заголовке будет что-то вроде этого: 

    <script src="Scripts/latestJQuery.js" type="text/javascript"></script>
    <script src="Scripts/jQueryMobileDefaults.js" type="text/javascript"></script>
    <script src="Scripts/latestJQueryMobile.js" type="text/javascript"></script>

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

Событие, для которого это может быть использовано, также может быть просто изменено. Для всех событий проверьте документацию jQueryMobile , но, например: pageinit срабатывает при инициализации страницы, поэтому только при первой загрузке pageshow будет запускаться каждый раз, когда страница загружен.

1 голос
/ 17 ноября 2011

pagecreate используется для загрузки страницы. Когда вы переключаетесь между страницами, он использует AJAX. Чтобы обнаружить эти изменения, используйте pageshow: 

$('#divTestEvent1').live('pageshow',function(event){
    alert(1);
});
1 голос
/ 17 ноября 2011

Это связано с тем, что jQuery Mobile игнорирует сценарий в заголовке файла two.html. Пожалуйста, поместите это на обеих страницах: (или создайте файл JS и включите в обе). 

<script>
$('#divTestEvent1').live('pageinit',function(event){
    alert(1);
});
$('#divTestEvent2').live('pageinit',function(event){
    alert(2);
});
</script>

PS: пожалуйста, используйте pageInit вместо pagecreate Смотри: http://jquerymobile.com/demos/1.0/docs/api/events.html

Другой вариант - придерживаться текущего кода, но принудительно обновлять, чтобы выполнить сценарий на странице 2, можно сделать это, установив: 

<ul data-role="listview">
    <li><a href="one.html" data-ajax="false">1</a></li>
    <li><a href="two.html" data-ajax="false">2</a></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...