Question

I nailed down a weird behavior on JQM.

Since the page is based on JQM Boiler plate, I do not include the full page here. I published the code on jsfiddle.

Here is a summary of the behavior click actions:

Here is the extract of the relevant code:

<div id="oneapart" 
    data-add-back-btn="true" 
    data-back-btn-text="List" 
    data-role="page" 
    data-title="Home page">

I do not understand why the last click on the List button (a jquery mobile back button) requires 2 click to actually act on the link. In fact, the weird behavior is that a first click highlight the button in blue, but it remains as is without switching to the previous page until a second click happens.

Any help will be appreciated.

Regards.

Answer 1

This issue can be fixed by adding the data-rel="back" to the button in the popup.

The issue posted on Github has been marked as resolved because of that.

The issue happens because data-rel="back" is missing in the link of the large cancel button in @jerone his fiddle. See “Closing dialogs” here: http://jquerymobile.com/test/docs/pages/dialog/index.html

The back button on pageTwo is dynamically created. When you don’t use data-rel="back" on the link that brings you back from dialogThree (which is also a page) to pageTwo it adds an item to the history stack. That’s why the back button on pageTwo then requires two clicks to actually bring you back to pageOne.
The active state is removed from a (back) button on the pagehide event. On the first click you stay on the same page, so this event doesn’t fire and the button keeps the active state.

I added data-rel="back" and then everything works as expected: http://jsfiddle.net/jEesE/6/

Closing as resolved.