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

});

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

此视频应该更好地解释一下：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事件会触发两次。

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

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

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

离开循环。

感谢大家的帮助

＆＃34;背面＆＃34;按钮转到目标然后返回原始页面

修改

更新

1 个答案: