Question

更新：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。

Answer 1

添加此属性：

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

Answer 2

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

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

停止刷新。

此外，我建议使用jquery处理点击事件，而不是onclick。示例

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

如果您在移动设备上使用点击处理程序会延迟点击200毫秒，这是很多，所以使用vclick，您可以阅读vclick here

Answer 3

试 event.preventDefault（）;

而不是返回false;

如何防止表单提交时jquery移动页面刷新？

3 个答案: