I have an overrides.js
script, which sets defaults in my application like so:
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = "fade";
$('html').addClass('viewGrid');
console.log("mobileinit detected in overrides");
$(window).trigger('jqm-ready');
});
The overrides.js
is pulled in via requireJS
after Jquery
has loaded and before Jquery Mobile
loads. On my page I have this snippet in the footer:
console.log("page done loading");
window.addEventListener('jqm-ready', function(){
console.log("detected jqm-ready")
// run some code
});
document.addEventListener('mobilelinit', function(){
console.log("mobilelinit detected from page");
// run some code
});
My console displays the following:
page done loading
mobileinit detected in overrides
So, I'm not able to detect mobileinit
or my custom jqm-ready
event through my eventListener added on the page.
As I'm using requireJS
I cannot use Jquery to detect mobileinit/jqm-ready
, because the page is parsed before Jquery has loaded. I hoped to be able to detect either event, but no luck so far. I need to detect them because the code I need to run needs to bind to Jquery Mobile events.
Question:
Is there something wrong in my snippet or why can't I bind to either mobileinit or jqm-ready like this?
Ok. I got it... I think I can't use Jquery's trigger
for events that I added listeners to using addEventListener
. But maybe not. Anyway this works:
var trigAnalytics = function( trigger ){
console.log("triggered by "+trigger);
};
document.addEventListener("jqm_ready",function(){console.log("jqm_ready"); trigAnalytics("jqm_ready");},false);
And in overrides.js
console.log("Hello now");
var evt = document.createEvent("Event");
evt.initEvent("jqm_ready",true,true);
document.dispatchEvent(evt);
Works.