Javascript &引用；“后退”；按钮转到目的地，然后返回原始页面

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

我有一点小毛病，把我难住了

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

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

当我点击后退按钮时，它会导航到“#home”，然后返回模块页面，但这只是间歇性的、随机的

这段视频应该能更好地解释这一点：

我不知道如何调试这个，也不知道是什么导致了这个bug。如果有人有任何想法，请告诉我

编辑 此页面的完整代码可在此处找到：

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

以下是单击处理程序的代码和单击处理程序调用的函数：

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

$（文档）。在（“单击”上，“#cList li a”，函数（事件）{
loadModules（this.text）；
返回false；
});
功能模块（课程）{
console.log（“启动模块检索”）
风险值数据={
“fn”：“mod”，
“数据”：当然，
“ajax”：“true”
};
$.ajax({
键入：“获取”，
url:SERVICE\u url，
数据：数据，
contentType:“应用程序/json”，
成功：功能（响应）{
console.log（“成功！”）；
控制台日志（响应）；
var i，list=“”；
if（$.isArray（response.module））{
对于（i=0；i

更新 我修改了上面的代码，以显示我为尝试和调试此问题所做的一些更改。这向我展示的是，有时（但并非总是）当我单击主页上动态创建的按钮之一时，changepage事件会触发两次

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

---

因此，我想知道是否有人知道是否有某种形式的队列存储可以清除的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');
            }

        }

跳出循环

---

感谢大家的帮助

添加完整的代码片段我编辑了这个问题以显示“主页”和整个“模块”页面--我不完全确定您想要从“完整的代码片段”中得到什么，所以我希望这有帮助，看起来像您的视频

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

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