“back” button goes to destination then back to original page

Question

I am using Phonegap and jQuery to develop an app.

I have a bit of a bug that has me stumped.

I have a back button which looks like this:

<div data-role="header">
        <a id="backFromModules" data-role="button" data-icon="back">Back</a>
        <h1 id="mHeader" class="wrap"></h1>
    </div>

and the javascript to make the button navigate back to the #home page:

$(document).on("click", "#backFromModules", function(event){
    console.log("back from modules");
    $.mobile.changePage("#home");

});

when I click on the back button it navigates to "#home" and then back to the modules page, but this only occurs intermittently, and randomly.

this video should better explain it: https://youtu.be/CyQz0KiNC64

I have no idea how I could debug this, or what could be causing the bug. If anyone has any thoughts, please let me know

EDIT

the full code of this page can be found here:

<div id="modules" data-role="page">
    <div data-role="header">
        <a id="backFromModules" data-role="button" data-icon="back">Back</a>
        <h1 id="mHeader" class="wrap"></h1>
    </div>
    <div data-role="content">
        <p>Below is a list of e-learning modules which can be viewed for this course</p>
        <ul id="mList" data-role="listview" data-inset="true">
            <li>An error has occurred!</li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" class="ui-grid-b">
        <div class="ui-block-a">
            <p>&copyCopyright information</p>
        </div>
        <div class="ui-block-b">
        </div>
        <div class="ui-block-c">
            <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
                <a href="#about" data-transition="slideup"  data-role="button" data-iconpos="notext" data-icon="info"  >About</a>
            </div>
        </div>
    </div>
</div>

and the home page looks like this:

<div id="home" data-role="page" >
    <div data-role="header">
        <h1 class="wrap">Qlearn App Contents</h1>
    </div>
    <div data-role="content">
        <p>Courses:</p>
        <ul id="cList" data-role="listview" data-inset="true">              <li>An error has occurred!</li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" class="ui-grid-b">
        <div class="ui-block-a">
            <p>Qlearn||build: 1.0.8</p>
        </div>
        <div class="ui-block-b">
        </div>
        <div class="ui-block-c">
            <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
                <a href="#about" data-transition="slideup"  data-role="button" data-iconpos="notext" data-icon="info"  >About</a>
            </div>
        </div>
    </div>
</div>

and I have some javascript to log every change page event

$(document).on("pagechange", function(event){
    console.log("Page Change");
    console.log(event);
});

The following is the code from the click handler and the function called by the click handler:

$(document).on("click", "#cList li a", function(event) {        
    loadModules(this.text); 
    return false;
});

function loadModules(course){
console.log("Starting mod retrieval")
var data = {
  "fn" : "mod",
  "data": course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL,
  data: data,
  contentType: "application/json",
  success: function(response) {
      console.log("Success!");
    console.log(response);
    var i, list = "";
    if($.isArray(response.module)){
            for (i = 0; i < response.module.length; i++) {
                console.log(response.module[i]);
                list += formatModuleListItem(response.module[i]);
                $.mobile.changePage("#modules");
                $("#mList").html(list).listview().listview('refresh');
            }

        }else{
            list = formatModuleListItem(response.module);
            $.mobile.changePage("#modules");
            $("#mList").html(list).listview().listview('refresh');
        }
    }

});
console.log("end of mod retrieval")
}

UPDATE

I have altered the above code to show some changes I made to try and debug this problem. What this has shown me is that sometimes (but not always) when I click on one of the buttons created dynamically on the home page, the changepage event fires twice.

It is only when the event fires twice that this bug occurs, which suggests the second occurrence of the event is being queued and firing when I navigate back to the homepage.

so I wonder if anybody knows if there is a queue of some form that stores changepage events that can be cleared?

Answer 1

Okay, After a very long process of elimination, I came to realize that the bug only occurred when there was more than one module in the list on the modules page.

this meant that my problem was in :

        if($.isArray(response.module)){
            for (i = 0; i < response.module.length; i++) {
                console.log(response.module[i]);
                list += formatModuleListItem(response.module[i]);
                $.mobile.changePage("#modules");
                $("#mList").html(list).listview().listview('refresh');
            }

        }

once i could break it down the problem became really obvious!

so, for the benefit of anybody else who might be having the problem:

the line $.mobile.changePage("#modules") is inside a for loop meaning it is being called every time the loop reaches that line.

the solution was to move

$.mobile.changePage("#modules");
$("#mList").html(list).listview().listview('refresh');

out of the loop.

thanks for everyone's help