Question

当我按下“btnNew”时，点击事件会触发，但页面不会导航到newLanguagePage，而是会返回到我的初始页面（index.html）。请问任何人，请告诉我我的愚蠢的头脑做错了什么？

这是我的HTML

<!DOCTYPE html> 
<html>
<body> 

<div id="languagesAdmin" class="mobilePage" data-role="page">

    <div data-role="header">
        <a href="#" data-rel="back" data-icon="back">Back</a>
        <h1>NOTHNG</h1>
        <a href="help.html" data-icon="info">Help</a>
    </div> 

    <div class="banner">
        <div class="logo"></div><div id="languagesTopImage" class="topBannerImage"></div>
    </div>

    <div class="ui-corner-all custom-corners">
        <h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
        <div class="ui-body ui-body-e">
            <div data-role="fieldcontain" class="filterDisabledCheckbox">
                <label for="HideDisabledLanguages">Hide disabled Languages</label>
                <input type=checkbox id="HideDisabledLanguages" name="HideDisabledLanguages" value="true" checked/>
            </div>
            <ul data-role="listview" id="lwLanguages" class="listViewMenu"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a id="btnNew" href="#" rel="external" data-role="button" data-icon="plus">New</a></li>
                <li><a href="index.html" data-role="button" data-icon="delete">Delete</a></li>
                <li><a href="index.html" data-role="button" data-icon="search">Search</a></li>
                <li><a href="index.html" data-role="button" data-icon="refresh">Refresh</a></li>
            </ul>
        </div>
    </div>
</div>

<div id="newLanguagePage" class="mobilePage" data-role="page">

    <div data-role="header">
        <a href="#" data-rel="back" data-icon="back">Back</a>
        <h1>Inter&nbsp;Pay&nbsp;Less</h1>
        <a href="help.html" data-icon="info">Help</a>
    </div> 

    <div class="banner">
        <div class="logo"></div><div class="topBannerImage"></div>
    </div>

    <div class="ui-corner-all custom-corners">
        <h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
        <div class="ui-body ui-body-e">
            New Language
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>

                <li><a href="index.html" data-role="button" data-icon="delete">Delete</a></li>
                <li><a href="index.html" data-role="button" data-icon="search">Search</a></li>
                <li><a href="index.html" data-role="button" data-icon="refresh">Refresh</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

这是JavaScript

var strBaseWSURL = "http://www.WHATEVER.com/";

var objLanguages = new Array();
var lngLanguagesCursor = -1;

//Language Object
function _Language(data) {
    this.Id = data.Id;
    this.Code = data.Code;
    this.Name = data.Name;
}


//LanguageAdmin_pageinit
$(document).on('pageinit', '#languagesAdmin', function () {

    try {
        execJQueryAjaxAndGetJSON([], strBaseWSURL + "IPLObjectsWS.asmx/GetAllLanguages", loadLanguages);
    }
    catch (e) {//Report the error
        alert("Error fetching the languages.")
        return false;
    }

    //New_Click
    $(document).on("click", "#btnNew", function () {
        $.mobile.navigate("#newLanguagePage", { transition: "slide" });
    });

    //Languages_onclick
    $(document).on("click", "#lwLanguages li a", function () {
        lngLanguagesCursor = $(this).closest("li").index();
    });
});

//LanguageDetails_pageinit
$(document).on('pageinit', '#languageDetails', function () {
    var objCurrentObject = objLanguages[lngLanguagesCursor];
    $("#languageid").val(objCurrentObject.Id);
    $("#languagecode").val(objCurrentObject.Code);
    $("#languagename").val(objCurrentObject.Name);

    //Save_onclick
    $(document).on("click", "#btnSaveCountry", function () {
        var objCurrentObject = objLanguages[lngLanguagesCursor];

        var objUpdatedLanguage = new _Language();
        objUpdatedLanguage.id = objCurrentObject.id;
        objUpdatedLanguage.Code = $("#languagecode").val();
        objUpdatedLanguage.Name = $("#languagename").val();

        execJQueryAjaxAndGetJSON(objUpdatedLanguage, strBaseWSURL + "IPLObjectsWS.asmx/SaveLanguage", savedLanguage);
    });
});

//__________________________________________________________________________Application Functions
//__________________________________________________________Calback functions
//Goes thru the languages and adds them to the lisview
function loadLanguages(result) {
    $.each(result.d, function () {
        $("#lwLanguages").append($('<li><a href="language_details.html">' + this.Name + '</a></li>'));
        objLanguages[objLanguages.length] = new _Language(this);
    });
    $("#lwLanguages").listview("refresh");
}

function savedLanguage(result) {
    alert("The object was saved successfully!");
}

//__________________________________________________________Main functions
//Executes a Webservice Method and send the returned JSON to a callback function
function execJQueryAjaxAndGetJSON(params, strURL, callBackFunc) {

    //GetCountries
    $.ajax({
        type: "POST",
        url: strURL,
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: callBackFunc,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ": " + XMLHttpRequest.responseText + "\n" + errorThrown);
        }
    });
}

jQuery Mobile 1.4中的$ .mobile.navigate无效

0 个答案: