How to use pageinit correctly?

Question

How to use pageinit correctly?

13.4k Views Asked by Dennis At 18 April 2025 at 13:55

I have a single file for each page and i am trying to implement the pageinit event handler on every page (I think what belongs strictly to one page, should be declared there) as shown below:

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

The event is bound properly to the page, so the code is executed but - now my problem - if i go to another page and return later on the pageinit event will be executed twice. I think that is because the .live method binds the pageinit event again to the page. But shouldn't the pageinit event only called once at page initialization? What I am missing here?

Original Q&A

There are 5 best solutions below

Christoph Baudson On 09 January 2012 at 08:18

A quick workaround I have used is declaring a variable containing the handler function.

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

Then always use die() before binding the handler with live()

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

I'm sure this is not the intended usage by the authors, but it does the trick, you can leave your code within the page DIV.

barsh On 28 October 2012 at 22:02

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

Rod On 29 April 2012 at 05:40

I solve the issue by passing the name of the event, in this case the "pageinit" instead of the handler.

<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

grantwparks On 16 December 2012 at 20:21

I'm pretty sure they recommend binding pageinit to the document using on(). E.g.

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

instead of having the pageinit bound to the page, which is getting re-inited. In fact, I thought $(document).on() was the recommended way to bind events in jQuery, in general, now.

**nav** · Accepted Answer

I think its probably best to move your JavaScript code into another file as while your navigating around your site jQuery Mobile may cleanup (read: delete from DOM) that myPage page and therefore will have to load it in again and hense rerun that same block of code you defined and bind 2 listeners for the pageinit event.

Thats basically why they suggest using the live or on functions however it falls over if you include the binding code on the page ;)

However if you insist on having your code placed on a per page basis than use bind instead of live.

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

jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event).

How to use pageinit correctly?

There are 5 best solutions below

Related Questions in JQUERY-MOBILE

Related Questions in PAGE-INIT

Trending Questions

Popular # Hahtags

Popular Questions