Pageinit Fires Multiple Times

I am developing a jQuery Mobile and PhoneGap app. I am using this code: $('#contact').live('pageinit', function() { //$.mobile.loading('show'); theme(); getData('contac

Solution 1:

In theory, any event that can be bound by 'live' can be bound directly. The benefit of binding directly is that it will (iirc) overwrite the previous bound handler. As such, you would only have one handler, so it wouldn't get triggered multiple times on subsequent loading.

try something like:

$("#contact").pageInit(function() {
  theme();
  getData('contact/list', contactList);
});

Solution 2:

I usually use the on() method instead of live() (which is now deprecated). I give each of my page containers an id, so on the index page it might be index, then I can bind to the event like:

$(document).on("pageinit", "#index", function() {
    //do stuff here
});

Works same way for page show also.

Solution 3:

When binding events in jquery mobile, you have to be very cautious as to ensure that they will not be bound multiple times. Navigating to a new page in jquery mobile will not "reset" the bound events as it would in more traditional navigation. The issue your facing is most probably due to the function being bound to the event every time you access the page, meaning that the more you access the page, the more times you will get that function to be executed when you do. In order to ensure the event is only bound once, I would recommend binding in the header of your initial page. This way, the event is bound once and for all, and the function will be run whenever this page is initiated.

Solution 4:

You can try adding data-ajax="false" to any forms you are submitting that may be creating multiple versions of the page (firing events multiple times).