另一个页面中的jQuery移动构建列表视图并在那里导航

Question

这是一个简单的Cordova＆amp; jQuery mobile（1.4.5）app ...

当我点击列表视图中的某个项目时，我想在另一个页面上创建一个列表视图并在那里导航。

只要我没有太快点击项目/按钮，我就可以按照需要运行代码。如果我快速地来回浏览页面，那么迟早我会得到一个空页面，标题中的文本错误。

这在Ripple和实际的Android设备中都会发生。为什么？我怎么能避免这个？我认为这与在页面转换期间点击项目有关，但我不知道。

HTML：

<div data-role="page" id="home">
    <a href="#categories" class="ui-btn mainButton">Exercises</a>
</div>

<div data-role="page" id="categories">

    <div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="Go back">
        <h1>Categories</h1>
    </div>
    <ul data-role="listview" id="categoryList"></ul>

</div>

<div data-role="page" id="exercises">

    <div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="Go back">
        <h1 id="category"></h1>
    </div>

    <ul data-role="listview" id="exerciseList"></ul>

</div>

使用Javascript：

    var lastCategoryID;

$(document).on("pagecontainerbeforechange", function (e, data) {

    switch (data.toPage[0].id) {
        case "categories":
            createCategories();
            break;
        case "exercises":
            createExercises(event.target.id, $(event.target).text());
            break;
    }
});    

function createExercises(categoryID, categoryName) {

    //Don't rebuild if is same category of last time.
    if (lastCategoryID == categoryID) return; else { lastCategoryID = categoryID; }

    //Set header text.
    $("#category").text(categoryName);

    $("#exerciseList").empty();
    switch (categoryID){
        case "c0":
            $("#exerciseList").append('<li><a href="#exercise" id="e0">Warming up</a></li>');
            $("#exerciseList").append('<li><a href="#exercise" id="e1">Weight lifting</a></li>');
            break;
        case "c1":
            $("#exerciseList").append('<li><a href="#exercise" id="e0">Warming up</a></li>');
            $("#exerciseList").append('<li><a href="#exercise" id="e2">Running</a></li>');
            break;
    }
    $("#exerciseList").listview("refresh");
}

function createCategories() {
    $("#categoryList").empty();
    $("#categoryList").append('<li><a href="#exercises" id="c0">Arms</a></li>');
    $("#categoryList").append('<li><a href="#exercises" id="c1">Legs</a></li>');
    $("#categoryList").listview("refresh");
}

重现的步骤（并非总是如此）：
1-单击“武器”
2-快速单击后退按钮
3-再次快速点击“武器”

而不是得到这个：

你得到了这个：

Answer 1

我能够主要通过改变

来解决问题

$(document).on("pagecontainerbeforechange", function (e, data) {

到

$(document).on('vclick', 'a', function () {