Jquery mobile JQuery Mobile-具有本地值的多页表单_Jquery Mobile_Forms_Multipage

Jquery mobile JQuery Mobile-具有本地值的多页表单

jquery-mobile forms

Jquery mobile JQuery Mobile-具有本地值的多页表单,jquery-mobile,forms,multipage,Jquery Mobile,Forms,Multipage,我试图得到一个运行局部变量的jquerymobile多页表单，但我有两个问题 a）第二个值在保存后不会更新，但会在编辑页面中重新加载 b）当我在查看和编辑之间连续切换（4次）时，编辑按钮会调用编辑页面（请参见URL），但页面不会显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Form test</title> <link rel="sty

我试图得到一个运行局部变量的jquerymobile多页表单，但我有两个问题

a）第二个值在保存后不会更新，但会在编辑页面中重新加载

b）当我在查看和编辑之间连续切换（4次）时，编辑按钮会调用编辑页面（请参见URL），但页面不会显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div id="view" data-role="page">
        <div id="view-head" data-role="header">
            <h1>View</h1>
            <a href="#edit" class="ui-btn-right" data-transition="none">Edit</a>
        </div>
        <div id="content" data-role="content">
            <h2 id="unit-title">x</h2>
            <p id="unit-summary">y</p>
        </div>
    </div>
    <div id="edit" data-role="page">
        <div id="edit-head" data-role="header">
            <a href="#view" class="ui-btn-left" data-transition="none">View</a>
            <h1>Edit</h1>
        </div>
        <form>
            <label for="edit-title" class="ui-hidden-accessible">Unit title</label>
            <input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
            <label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
            <textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
            <input type="button" name="edit-submit" id="edit-submit" value="Save">
        </form>
    </div>
    <script type="text/javascript">
        var unit =  { "id":"1" , "title" : "Hello", "summary" : "World" };

        $(document).on("pagebeforeshow","#view",function() {
            document.getElementById('unit-title').innerHTML = unit.title;
            document.getElementById('unit-summary').innerHTML = unit.summary;
        });

        $(document).on("pagebeforeshow","#edit",function() {
            $(document).on('click', '#edit-submit', function() {
                unit.title = document.getElementById('edit-title').value;
                unit.summary = document.getElementById('edit-summary').innerHTML;
                $.mobile.navigate("#view", {});
            });
            document.getElementById('edit-title').value = unit.title;
            document.getElementById('edit-summary').innerHTML = unit.summary;
        });
    </script>
</body>
</html>


形式测试
看法
x
y
编辑
单位名称
单位摘要
变量单位={“id”：“1”，“title”：“Hello”，“summary”：“World”}；
$（文档）。在（“pagebeforeshow”，“查看”，函数（）上{
document.getElementById（'unit-title'）。innerHTML=unit.title；
document.getElementById（'unit-summary'）。innerHTML=unit.summary；
});
$（文档）。在（“pagebeforeshow”，“编辑”，函数（）上{
$（文档）。在（'单击'，'编辑提交'，函数（）上）{
unit.title=document.getElementById（'edit-title'）。值；
unit.summary=document.getElementById（'edit-summary'）.innerHTML；
$.mobile.navigate（“#视图”，{}）；
});
document.getElementById（'edit-title'）。value=unit.title；
document.getElementById（'edit-summary'）。innerHTML=unit.summary；
});

以下是完整的示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

    <div id="view" data-role="page">
        <div id="view-head" data-role="header">
            <h1>View</h1>
            <a href="#edit" class="ui-btn-right" data-transition="none">Edit</a>
        </div>
        <div id="view-content" data-role="content">
            <h2 id="unit-title">x</h2>
            <p id="unit-summary">y</p>
        </div>
    </div>

    <div id="edit" data-role="page">
        <div id="edit-head" data-role="header">
            <a href="#view" class="ui-btn-left" data-transition="none">View</a>
            <h1>Edit</h1>
        </div>
        <form>
            <label for="edit-title" class="ui-hidden-accessible">Unit title</label>
            <input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
            <label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
            <textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
            <input type="button" name="edit-submit" id="edit-submit" value="Save">
        </form>
    </div>

    <script type="text/javascript">
        var unit =  { "title" : "Hello", "summary" : "World" };

        $(document).on("pagebeforeshow","#view",function() {
            document.getElementById('unit-title').innerHTML = unit.title;
            document.getElementById('unit-summary').innerHTML = unit.summary;
        });

        $(document).on("pagebeforeshow","#edit",function() {
            document.getElementById('edit-title').value = unit.title;
            document.getElementById('edit-summary').innerHTML = unit.summary;
        });

        $(document).on('click', '#edit-submit', function() {
            unit.title = document.getElementById('edit-title').value;
            unit.summary = document.getElementById('edit-summary').value;
            $.mobile.navigate("#view", {});
        });
    </script>
</body>
</html>


形式测试
看法
x
y
编辑
单位名称
单位摘要
变量单位={“title”：“Hello”，“summary”：“World”}；
$（文档）。在（“pagebeforeshow”，“查看”，函数（）上{
document.getElementById（'unit-title'）。innerHTML=unit.title；
document.getElementById（'unit-summary'）。innerHTML=unit.summary；
});
$（文档）。在（“pagebeforeshow”，“编辑”，函数（）上{
document.getElementById（'edit-title'）。value=unit.title；
document.getElementById（'edit-summary'）。innerHTML=unit.summary；
});
$（文档）。在（'单击'，'编辑提交'，函数（）上）{
unit.title=document.getElementById（'edit-title'）。值；
unit.summary=document.getElementById（'edit-summary'）。值；
$.mobile.navigate（“#视图”，{}）；
});
当我对函数重新排序并定义$（文档）时，
b）被解决。on（'click'…）

在

$（文档）之外。on（'pagebeforeshow'，“#edit”…）

a）在我修复

$（文档）时被解决。on（'click'…）

设置

unit.summary=document.getElementById（'edit-summary'）。值