Hey guys,
I'm unable to prevent navigation with preventDefault(), when using jQuery Mobile. It actually looks like the "pageshow" and "changepage" events are fired before my "click" event...
This is something I've done before with pure jQuery, but maybe it should be done differently with jQM? Any help is highly appreciated.
Here's my case.
I'm building a quiz where the user can ask for help about the current question. There's multiple answers to select from, including an "I'm not sure".
When "I'm not sure" is clicked, I'd like to display my help bubble and stay on the same page. Once the help is shown, the person can once again click "I'm still not sure" and move to the next question. So my button "I'm not sure" has a normal href that leads to the next question.
I'm trying to intercept the click and prevent the navigation when the help is *not yet* being displayed:
- $("#help a.open, #quiz:not(.show_help) a.unknown").live("click", function(event) {
- event.preventDefault();
- $(this).parents("#quiz").addClass("show_help").find('#help .copy').slideDown();
- return false;
- });
My problem is that preventDefault() (and return false, for that matter) don't prevent the navigation from happening. But I know for a fact that the code in this callback gets executed.
In order to confirm in what order things are happening, I added a console.log(event.type) to the click event, as well as to two handlers, on "changepage" and "pageshow":
- $("body").live("pageshow", function(event, ui){ console.log(event.type); });
- $("body").live("changepage", function(event, ui){ console.log(event.type); });
They both get executed before the click handler gets called. Here's the order, in Chrome:
Can anyone help me with this?
Thanks in advance!