How to use jQuery Mobile selectmenu custom style with $.mobile.linkBindingEnabled = false?

Question

We are developing a mobile app using PhoneGap and Backbone.js. In order to enable Backbone's router to handle hashtag changes, all tutorials tell you to set the following property:

$.mobile.linkBindingEnabled = false;

While this works great to enable Backbone, it is now causing a bug with the selectmenu. Specifically, we want to use the custom style of selectmenu popup (as opposed to native), but it doesn't work with that option set to false.

I'm looking for a way to manually intercept this event and show the custom menu. The first thing I thought of is to manually capture the click and use the selectmenu's "open" method, but this doesn't work.

I've created a jsFiddle (http://jsfiddle.net/tonicboy/zPS5j/) to demonstrate the problem. When you first load it up, you can click on the selectmenu and it will open the custom-style menu. If you toggle the linkBindingEnabled to false, it no longer works.

Answer 1

Ok, we seem to have found a workaround. Previously, I had tried to use the open method of the selectmenu, like:

$("#selectId").selectmenu("open");

But this didn't work, probably because it was still relying on jQM's click handling. It turns out that when the page is rendered, jQM creates the custom menus for each selectmenu and hides them off-screen, giving them an ID in the form of #selectId-listbox. You can use the popup widget to then show this menu programmatically.

$("#selectId-listbox").popup("open");

Unfortunately, since we now have to handle all click handling duties, you must manually capture the user's selection, update the underlying form element and close the menu.