All geek questions in one place

The documentinit page fires more than once on iOS (jQueryMobile)

I have a Phonegap and jQuery Mobile app that works great on Android and the web. On iOS, I get unexpected results, which are apparently caused by the fact that the document.pageinit event, to which I attach a handler for most application processes, fires twice.

No, I did not bind it twice. No, I did not use document.ready. Yes, I bound it to the document early in the script, and not inside any other function.

$(document).on('pageinit',function(event){ alert(' Pageinit on document'); //Some more code })

At the first start, the splash screen is still displayed. At the moment, when testing a MacBook Pro with Xcode, the console is not even available: the above message did not appear in the console when I used console.log.

The second time, fires shortly after jQueryMobile created the first page.

What causes this double layoff and what can I do with it?

EDIT: I later noticed that pageinit does not just start a second time, but every time I open a new data-role = 'page' div section. See my answer below.

+6
source share
4 answers

I appreciate the Zoltans answer, and this may be relevant in some cases, but that was not the reason.

$(document).on('pageinit') will fire for every page transition used in your jQuery mobile app. This will happen both with HTML links and when using $.mobile.changePage(); .

Terrible, docs don't mention it anywhere: they advise you to use it without mentioning that it will fire for each subsequent page.

I cannot believe that they are creating this problematic example as a valid equivalent to $(document).ready() .

They should tell you about usage using .one () instead of .bind () or on () to avoid executing multiple codes.

+15
source

This is because I think you are using jquery and jquery mobile together. But the solution is simple. Try

 $(document:not(.processed)).addClass('processed').on('pageinit',function(event)

That should solve it.

+2
source

Changing the body to <body data-role="page"> should solve the problem.

+2
source

I struggled with this problem too long not to share with others. And I think that this is not only a problem under iOS, but also under Android (this caused flickering in my case).

The pageinit event was fired twice each time a request was made. The first one was correct in order to get data for the provided url, the other was called after a new page was loaded into the DOM (the jQueryMobile page is dynamically inserted into the document). I think there are more solutions to solve this problem, here comes my:

 $(document).ready(function(){ $(this).delegate("#page-selector", "pageinit", function(ev, data){}); // I don't know why the line has to be present, but otherwise does not work });

And my HTML document looks like this:

 <html> <head>...here goes scripts...</head> <body> <div id="#page-selector"> <!-- just wrapper --> <div data-role="page"> ... content... </div> </div> </body> </html>

I hope this spares precious time for others!

0
source

Source: https://habr.com/ru/post/925461/

More articles:


All Articles