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('contact/list',contactList);
    //$.mobile.loading('hide');
});

When accessing page for the first time, it works good. In second attempt event is firing multiple times. I tried using bind but it doesn't work.

I think it is connected with live event. It is binded each time I initialize the page, which makes it multiple. Problem is solved when linking that way: window.location.href-it recreates DOM. Unfortunately I can't use it.

Is there any way to handle pageinit in another way?

I tried to find it earlier but with no success. Also looked at: click() firing multiple times

回答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);
});

回答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.

回答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.

回答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).

来源：https://stackoverflow.com/questions/12512174/pageinit-fires-multiple-times