JQuery Pageinit не стреляет - PullRequest
Новая
       15

JQuery Pageinit не стреляет

5 голосов
/ 27 марта 2012

У меня есть 2 страницы, которые я связал, используя swipeleft и swiperight event (назад и вперед), но когда я пролистываю на другую страницу, jquery не запускает событие pageinit, и у меня остаются только верхний и нижний колонтитулы. Должен ли я использовать событие changePage или использовать событие loadPage? Я знаю, что есть ошибка в другой версии jquerymobile, когда событие pageinit не срабатывает, но я уже использую RC1, который уже решил ее, но событие все еще не запускается. что мешает ему стрелять? Заранее спасибо.

Код выглядит следующим образом: 

      <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>esports</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<link rel="stylesheet" href="jquery.zrssfeed.css" />
</script>

<style>


</style>
</head>
<body>
<!-- index -->
<div data-role="page" id="index">
    <div data-role="header">
        <h1>esports times</h1>
    </div>
    <!--/header-->
    <div data-role="content" id="content">
        <div id="currentFeed">teamliquid. &nbsp; skgamin</div>
        <ul id="rssFeed" data-role="listview">
        </ul>
    </div>
</div>

</body>
</html>

<!-- load javscripts here-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js">     </script>
<script src="jquery.zrssfeed.js"></script>
<script>
    $('#index').bind("pageinit", (function () {
        $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
            limit: 10,
            date: false,
        });
    }));

    $('#index').bind("swipeleft", function () {
        $.mobile.changePage("teamliquid.html", "slide", true, false);
    });
</script>

<!-- /javascript-->

Ответы [ 2 ]

7 голосов
/ 27 марта 2012

Изменить страницу - это то, что вы ищете.Страница загрузки просто загружает ее в DOM, так что вы можете манипулировать, прежде чем вы действительно показываете страницу

При связывании с инициализацией страницы убедитесь, что вы связываете событие pageinit, используя уникальный идентификатор.Они не могут оба иметь id = "# index".Также убедитесь, что вы привязываете инициализацию страницы к каждой странице.Ваш код будет запускать pageinit только для страницы #index, а не для teamliquid.html.

Используйте следующее в <head></head> ваших документов: 

$(document).on('pageinit','#index', function(){
    $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
      limit: 10,
      date: false,
    });
});
$(document).on('pageinit','#otherpage', function(){
    ... This would be for the other page you are referring to....
});
$(document).on('swipeleft','#index', function(){
    $.mobile.changePage("teamliquid.html", { transition: "slide" });
});
$(document).on('swiperight','#otherpage', function(){
    $.mobile.changePage("index.html", { transition: "slide" });
});

илиполучить pageinit для огня для каждой страницы 

$(document).on('pageinit','[data-role=page]', function(){
    ....ground breaking code...    
});

Начиная с jquery 1.7, все связывают, используют и делегируют, используя метод .on ().Это рекомендуемый способ привязки вашего pageinit для JQM.Вы также можете делать классные вещи, например заменять «#index» на «[data-role = page]», чтобы ваш код срабатывал на каждой странице.Вот JSfiddle, демонстрирующий, что это действительно работает.http://jsfiddle.net/codaniel/cEWpy/2/

0 голосов
/ 27 марта 2012

Попробуйте использовать$(function() { /* dom ready */ });вместо$('#index').bind("pageinit", (function () { ... }));Затем вы можете поместить теги script в head-tag, удалить осиротевшую </script> в строке 9, и у вас будет чистый HTML, и все будет работать нормально.

...