How to use pageinit correctly?

jquery-mobile page-init
Dennis picture Dennis · Jan 9, 2012 · Viewed 12.7k times · Source

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?

Answer

Rod picture Rod · Apr 29, 2012

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

Related questions

jQuery Mobile - binding to pageinit event

I am trying to understand the following jQuery Mobile example. $( '#aboutPage' ).live( 'pageinit',function(event){ alert( 'This page was just enhanced by jQuery Mobile!' ); }); What is #aboutPage in this context? What is the object pageinit is binding to?

Read More
How can I check if a checkbox is checked?

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code. <script type=text/javascript> function validate(){ if (remember.checked == 1){ alert("checked") ; } else { alert("You …

Read More
How to redirect on another page and pass parameter in url from table?

How to redirect on another page and pass parameter in url from table ? I've created in tornato template something like this <table data-role="table" id="my-table" data-mode="reflow"> <thead> <tr> <th>Username&…

Read More