Как правильно использовать Pageinit? - PullRequest
Новая
       19

Как правильно использовать Pageinit?

6 голосов
/ 09 января 2012

У меня есть один файл для каждой страницы, и я пытаюсь реализовать обработчик событий pageinit на каждой странице (я думаю, что то, что относится строго к одной странице, должно быть там объявлено), как показано ниже: 

<body>
    <div id="myPage" data-role="page">
        <!-- Content here -->
        <script type="text/javascript">
            $("#myPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

Событие правильно привязано к странице, поэтому код выполняется, но - теперь моя проблема - если я перейду на другую страницу и вернусь позже, событие pageinit будет выполнено дважды.Я думаю, это потому, что метод .live снова связывает событие pageinit со страницей.Но не должно ли событие pageinit вызываться только один раз при инициализации страницы?Что мне здесь не хватает?

Ответы [ 5 ]

6 голосов
/ 29 апреля 2012

Я решаю проблему, передавая имя события, в данном случае «pageinit» вместо обработчика. 

<script defer="defer" type="text/javascript">

var supplier = null;
$("#pageID").die("pageinit"); //<--- this is the fix
$("#pageID").live("pageinit", function(event){

console.log("initialized - @(ViewBag.ID)");
supplier = new Tradie.Supplier();

supplier.Initialize("@(ViewBag.ID)");

});

Ссылка: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx

2 голосов
/ 17 декабря 2012

Я уверен, что они рекомендуют привязывать pageinit к документу с помощью on ().Например, 

$(document).on ('pageinit', '#myPage', function (event) {

вместо привязки pageinit к странице, которая становится заново инициализированной.На самом деле я думал, что $ (document) .on () - рекомендуемый способ связывания событий в jQuery, в общем, сейчас.

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

Я думаю, что лучше всего переместить ваш код JavaScript в другой файл, так как во время навигации по вашему сайту jQuery Mobile может очистить (читай: удалить из DOM) эту страницу myPage и, следовательно, придется загружать ее снова и сноваперезапустите тот же блок кода, который вы определили, и свяжите 2 прослушивателя для события pageinit.

По сути, именно поэтому они предлагают использовать функции live или on, однако это не работает, если вы включите код привязкина странице;)

Однако, если вы настаиваете на размещении кода на странице, используйте bind вместо live.

Ref: http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html

jQuery Mobile имеет простой механизм для поддержания DOM в чистоте.Всякий раз, когда он загружает страницу через Ajax, jQuery Mobile помечает страницу, которая будет удалена из DOM, когда вы уйдете от нее позже (технически, по событию pagehide).

0 голосов
/ 29 октября 2012 
$("#page1").live("pageinit", function () {
    alert('pageinit');
    $("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});
0 голосов
/ 09 января 2012

Быстрый обходной путь, который я использовал, объявляет переменную, содержащую функцию-обработчик. 

var handler = function() {
    // your code
};

Затем всегда используйте die() перед привязкой обработчика с live()

$( "#myPage" ).die( handler ).live( handler );

Я уверен, что авторы не используют его по назначению, но это помогает, вы можете оставить свой код на странице DIV.

...