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

Question

我正在使用 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);
});

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

$(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 事件会触发两次。

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

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

Answer 1

好吧，经过很长的排除过程，我才意识到只有在 modules 页面的列表中有多个模块时才会出现该错误。

这意味着我的问题在于:

        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") 行位于 for 循环内，这意味着每次循环到达该行时都会调用它。

解决办法是移动

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

跳出循环。

感谢大家的帮助