Question

我有一个2页的jQuery Mobile示例，其中我无法阻止第二页从上次访问中缓存它的内容。

提供帮助

在第2页上，在输入字段中输入一些文本并点击“保存”，然后更改为第1页。返回第2页时，文本仍在输入字段中。在我的实际开发应用程序中，保存按钮将新记录保存到WebSQL，这个问题不止一次地运行click事件！是因为正在应用多个pageshow事件？如果是这样，我该如何阻止这种情况发生？

我所做的任何事情似乎都不会阻止第2页缓存或停止多重绑定：o（

要在我的真实世界代码中应用网页显示，网页隐藏，点击事件的JavaScript包含在'deviceready'事件中，因此应该只运行一次。

$(document).on("deviceready", function() {});

HTML

<div data-role="page" id="pagelist">
    <div data-role="header">
        <h1>Header Page 1</h1>
    </div>
    <div data-role="content">
        <p>Here I would normally show a list of saved items.</p>
    </div>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li> <a href="#pagelist" data-icon="grid" class="ui-btn-active" data-transition="slide">List</a>

                </li>
                <li> <a href="#pagenew" data-icon="plus" data-transition="slide">New</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="pagenew">
    <div data-role="header" data-rel="back">
        <h1>Header Page 2</h1>
    </div>
    <div data-role="content">
        <p>This is pagenew.</p>
        <p>
            <input type="text" id="name">
        </p>
        <button type="button" id="newsave" data-icon="plus" data-inline="true">Save</button>
    </div>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li> <a href="#pagelist" data-icon="grid" data-transition="slide">List</a>

                </li>
                <li> <a href="#pagenew" data-icon="plus" class="ui-btn-active" data-transition="slide">New</a>

                </li>
            </ul>
        </div>
    </div>
</div>

的JavaScript

$('#pagenew').on('pageshow', function(){            
    $("#newsave").click(function(){
        //Save to WebSQL.
        alert('saved');
        $.mobile.changePage("#pagelist")
    });
});

jQuery Mobile无法停止页面缓存

0 个答案: