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

У меня есть один файл для каждой страницы, и я пытаюсь реализовать обработчик событий 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 не должно вызываться только один раз при инициализации страницы? Чего мне здесь не хватает?

6
jquery-mobile page-init

5 ответов

Я думаю, что, вероятно, лучше всего переместить код JavaScript в другой файл, так как во время навигации по вашему сайту jQuery Mobile может очистить (читать: удалить из DOM), что myPage страница и, следовательно, придется загрузить его снова и hense повторно запустить тот же блок кода, который вы определили и привязать 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 при переходе от нее позже (технически, на странице событие.)

2

Я решаю проблему, передавая имя события, в этом случае "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)");

});

Ref: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx

6

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

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

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

2

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

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

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

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

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

0
$("#page1").live("pageinit", function () {
    alert('pageinit');
    $("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});
0