“back"按钮转到目的地，然后返回原始页面

我正在使用Phonegap和jQuery开发一个应用程序。

我有个小毛病，把我难住了。

我有一个后退按钮，它看起来像这样:

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

和使按钮导航回#home页面的javascript:

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

当我点击后退按钮时，它导航到"#home"，然后回到模块页面，但这只是间歇性地随机发生。

这个视频应该更好地解释它:https://youtu.be/CyQz0KiNC64

我不知道如何调试这个，或者什么可能导致错误。如果有人有任何想法，请告诉我

编辑

本页的完整代码可以在这里找到:

<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>

和主页看起来像这样:

<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>

和我有一些javascript记录每一个更改页面事件

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

下面是click处理程序和click处理程序调用的函数的代码:

$(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")
}

更新

我已经改变了上面的代码，以显示我所做的一些更改，以尝试和调试这个问题。这表明，有时(但并非总是)当我单击主页上动态创建的一个按钮时，changepage事件会触发两次。

只有当事件触发两次时才会发生此错误，这表明当我导航回主页时，该事件的第二次发生正在排队并触发。

所以我想知道是否有人知道是否有某种形式的队列，存储可以清除的更改事件?

        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');
            }
        }

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