JQuery Mobile - 具有本地值的多页表单答案

【问题标题】：JQuery Mobile - multipage form with local valuesJQuery Mobile - 具有本地值的多页表单
【发布时间】：2016-01-07 19:39:32
【问题描述】：

我尝试获取一个运行局部变量的 jquery 移动多页表单，但我有两个问题。

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>

【问题讨论】：

b) 当我重新排序函数并在 $(document).on("pagebeforeshow","#edit" ...) 之外定义 $(document).on('click' ...) 时解决了
a) 当我修复 $(document).on('click' ...) 以设置 unit.summary = document.getElementById('edit-summary').value; 时解决

标签： jquery-mobile forms multipage

【解决方案1】：

这是完整的例子

<!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>

【讨论】：