Mild-Mannered Canadian Fury

Doug Stephen is Politely Peeved

jQuery Mobile For Literate Adults

Mon, 16 Apr 2012 Ā«permalinkĀ»

A little followup to my post about jQuery the other day.

My issue was that when using jQuery Mobile, the $(document).ready() event was firing twice, and in turn double-binding my event handlers.

Apparently, this isn’t the way one goes about doing things in jQuery Mobile anymore. They even tell you so using giant yellow angry boxes, but they do it in a really stupid place; on the introductory Events page. If you’re coming from jQuery in to the world of jQuery mobile, the chances of heading to the front page of the Events section seems pretty slim (I never went there). You expect for the same events to be present, and the only thing you would end up doing is sifting through subsections looking for new stuff. You’d probably never end up at this page unless you did something horribly wrong that wouldn’t have worked anyway. That being said, they front-load a lot of information in to the main page for Events, and it looks like a lot of people missed the memo. So at a minimum, I’m in good company.

Let me first defend myself by saying I’m not usually the type of person who shirks looking through documentation. When I write Java code at the lab, I obsessively JavaDoc all of my work and I spend a great deal of time sifting through JavaDocs myself, as well as digging around GitHub wikis, GitHub Issues pages, Google Code project sites, and the like. I enjoy learning the idiosyncrasies of the tools that I have chosen to use. It’s not my fault if you haven’t structured your documentation sanely.

You Should Feel Bad, jQuery Mobile

I will take responsibility for not knowing the proper way to go about initializing event callbacks. But when a lot of people are missing this fairly serious little gotcha, you clearly aren’t advertising it well enough.

Anyway. Because jQuery uses a great deal of Ajaxy magic to dynamically build the DOM, they introduced a new event; pageinit. Instead of binding a bunch of handlers inside of the $(document).ready() callback, you simply attach a handler for pageinit to the document and stuff everything in that callback.

I haven’t bothered doing this, I’m still using a bind-unbind because I don’t have multiple Ajax pages on the interface that I’m using. But there you go.