jQuery Mobile + requirejs: pagebeforecreate event randomly firing/not firing

jQuery Mobile + requirejs: pagebeforecreate event randomly firing/not firing

Hi to all, I need some help!

I'm coding a debug library that will inject a button in every jQuery Mobile page header. I'm using one HTML file, multiple jQuery Mobile pages inside, like this:

  1. <!DOCTYPE html>

  3. <html>

  5. <head>

  7.     <title>TuBa GameS</title>
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  11. <!-- CSS stylesheets -->
  13. <!-- Font Awesome CSS -->
  14. <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
  16. <!-- jQuery Mobile CSS -->
  17. <link rel="stylesheet" type="text/css" href="css/jquerymobile/jquerymobile.css" />
  19. <!-- RequireJS, load main script -->
  20. <script data-main="js/app/index.js" src="js/require.js"></script>
  22. </head>

  24. <body>

  26. <!-- ================== [ Page: #splash ] ================== -->

  28. <div data-role="page" id="splash">

  30.     <div data-role="header" data-position="fixed">
  31.    <h2>TuBa GameS</h2>
  32. </div>
  34. <div data-role="content">
  36.        <ul data-role="listview">
  38. <li><a href="#userpass">TEST Page in DOM: #userpass</a></li>
  40. </ul>
  41.     
  42. </div> <!-- END: content -->

  44. </div> <!-- END: page #splash -->

  46. <!-- ================== [ Page: #userpass ] ================== -->

  48. <div data-role="page" id="userpass">

  50.     <div data-role="header" data-position="fixed">
  51.    <h2>TuBa GameS</h2>
  52. </div>
  54. <div data-role="content">
  56.    <p>Page: index.html#userpass</p>
  58. </div> <!-- END: content -->

  60. </div> <!-- END: page #userpass -->

  62. </body>

  64. </html>

I'm using requirejs, and writing the "header button inject" code in jQuery Mobile's "pagebeforecreate", so I add the button BEFORE ENHACEMENT IN EVERY data-role="page" <div>

The problem is that the "pagebeforecreate" event is randomly firing: sometimes it doesn't fire at all, sometimes it's fired for only the "visible" page, sometimes for two pages... I supposse that is a problem related with requirejs and dependencies order.

This is the code of the debug requirejs module:

  1. define ( ['jquery', 'jquerymobile'], // Modules required

  3. function ($) {

  5.     /* We add the debug button to header (left side) of every JQM page
  6.      * BEFORE being enhaced
  7.      */
  8.     console.log("Number of JQM pages in DOM: " + $("[data-role='page']").length);
  9.     
  10.     $("[data-role='page']").each ( function (index) { 
  12.    $(this).on( "pagebeforecreate", function( event, ui ) {
  13.         
  14.        var pageid = $(this).attr("id");
  15.         
  16.        console.debug("TuBa Engine JS [debug]: JQM page id=[" + pageid + "] is going to be enhaced!");
  17.         
  18.    }); // END: pagebeforecreate event
  20. }); // END: JQMpages.each
  21.     
  22. }); // END: requireJS module

Sorry about my poor english, I'm spanish and I'm afraid that my english is not very good. I hope you can help me with this problem. Thanks in advance, guys! You are really awesome!