All geek questions in one place

How to use pageinit correctly?

I have one file for each page, and I'm trying to implement an event handler on the page on each page (I think that what belongs to exactly 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 correctly attached to the page, so the code is executed, but now my problem is if I go to another page and come back later, the pageinit event will be executed twice. I think this is because the .live method binds the pageinit event to the page again. But should the pageinit event be raised only once when the page is initialized? What am I missing here?

+6
source share
5 answers

I think that it is probably best to move your JavaScript code to another file, since when navigating your site jQuery Mobile can clear (read: delete from the DOM) myPage page and therefore have to load it again, and hense repeat this same code code that you defined and bind 2 listeners for the pageinit event.

Basically, why they suggest using the live or on functions, however it crashes if you include the anchor code on the page;)

However, if you insist that your code is based on each page, use bind instead of live .

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

jQuery Mobile therefore has a simple mechanism to keep the DOM in order. Whenever it loads a page through Ajax, jQuery Mobile places a page that will be removed from the DOM when you move away from it later (technically, in an event on the page).

+2
source

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

 <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)");

});

Link: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx

+6
source

I am sure that they recommend attaching pageinit to the document using on (). For instance.

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

instead of linking the page to a page that returns again. Actually, I thought that $ (document) .on () was the recommended way to bind events in jQuery, in general, now.

+2
source

The quick workaround I used was to declare a variable containing a handler function.

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

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

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

I am sure that this is not an intentional use by the authors, but it does the trick, you can leave your code on the DIV page.

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

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

More articles:


All Articles