1

更新：abdu 的答案有效，但前提是我将脚本嵌入到我的 index.html 文件中（而不是像我一样将它包含在链接的 app.js 文件中）......

我正在 jquery mobile 和 angularjs 中创建一些简单的移动应用程序（不一起），看看我想在哪个基础上构建......

我在 jquery mobile 中遇到问题。当您提交表单时，它不会简单地动态更新列表，而是刷新并清除页面：

<div id="home" data-role="page">

<div data-role="content">
    <form id="form1"> 
        <input id="list-text" type="text" placeholder="enter text here...">
        <button id="button1" onclick="addToList()" >Add</button>
    </form>

    <ul id="the-list" data-role="listview"></ul>
</div>


function addToList() {
    var newText = $('#list-text').val();
    $('#the-list').append('<li>' + newText + '</li>');
    // will be updating localStorage here

    $('#list-text').val(' ');

}

我已经尝试对此进行研究，但仍然不明白为什么......也许我需要更多地了解表单和 jquery。

4

3 回答 3

2

添加此属性：

data-ajax="false"

到你的表格。它将防止 jQuery Mobile 劫持表单处理。

另请阅读我关于如何使用 jQuery Mobile 处理表单的其他答案：https ://stackoverflow.com/a/15205612/1848600

以及官方文档的链接：http: //jquerymobile.com/demos/1.2.0/docs/forms/forms-sample.html

于 2013-07-03T22:01:06.230 回答
2

您可以将按钮移出表单或完全停止提交表单，例如

$("#form1").on('submit',function(){return false;});

这将停止刷新。

另外我会推荐使用 jquery 来处理点击事件，而不是 onclick。例子

$("#button1").on('vclick',function(){});

如果您在移动设备上使用点击处理程序会延迟点击 200 毫秒，这很多，所以请使用 vclick，您可以在此处阅读有关 vclick 的信息

于 2013-07-04T02:09:10.357 回答
1

尝试 event.preventDefault();

而不是返回false；

于 2014-02-04T18:35:34.383 回答