Question

这是我的第一页，我们将在其中填写详细信息

<div data-role="content">
   <div data-role="fieldcontain">
       <label for="name1">Name</label>
          <input name="name1" id="name1" value="" type="text">
   </div>
   <div data-role="fieldcontain">
        <label for="age">Age</label>
        <input name="age" id="age" value="" type="text">
   </div>
   <div data-role="fieldcontain">
        <label for="address">Address</label>
         <input name="address" id="address" value="" type="text">
   </div>
   <div data-role="fieldcontain">
         <label for="mobile">Mobile</label>
         <input name="mobilet" id="mobile" value="" type="text">
   </div>
   <div data-role="button" data-theme="b" data-inline="true" id="button">Submit</div>
</div>

下面是第二页，我们将在其中显示已填充的数据，将给出一个编辑按钮，该按钮将再次将用户带到第一页。

<div data-role="content" id="content2">
    <form id="form1">
        <div data-role="fieldcontain">
            <label for="name">Name</label>
            <span class="field" style="padding:350px;" id="un"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="age">age</label>
            <span class="field1" style="padding:350px;" id="pw"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="address">Address</label>
            <span class="field2" style="padding:350px;" id="au"></span>
        </div>
        <div data-role="fieldcontain">
            <label for="mobile">Mobile</label>
            <span class="field3" style="padding:350px;" id="fr"></span>
        </div> 
        <div style="text-align:center;">                    
            <div data-role="button" data-theme="b" data-inline="true" id="button2">Edit</div>
        </div> 
    </form>
</div>

在jquery中的

： -

$(document).unbind('pageinit').bind('pageinit', function () {          
    $("#button1").click(function () {
        callConnection();
    });     
    $("#button2").click(function () {
        callEditConnection();
    });
});

function callConnection(){
    localStorage.setItem("user", $("#name1").val());
    localStorage.setItem("pass", $("#age").val());
    $.mobile.changePage("#page2");
}

function callEditConnection(){
    $("#un").val(localStorage.getItem("user"));
    $("#pw").val(localStorage.getItem("pass"));
    $.mobile.changePage("#page1");       
}

请帮助我找出我的代码问题是什么，第2页第1页的值不会出现

Answer 1

从您的代码中我看不到您将数据传递到第2页，我假设您要显示您在第1页上输入的数据，在您的documnent bind方法中输入此代码

$("#page2").on("pageshow", function (event) {
    $("#un").text(localStorage.getItem("user"));
    $("#pw").text(localStorage.getItem("pass"));
});

显示页面时将触发该功能。所以这里我们从本地存储中获取值并将其放在html中。

这是工作fiddle

在表单提交时，我要进入下一页，数据不会到来

1 个答案: