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

更新：阿卜杜的答案工作，但只有当我在index.html文件嵌入脚本（而不是包括它在一个链接app.js文件中像我）...如何防止表单提交jquery移动页面刷新？

我创建一些简单的移动应用程序在jQuery的移动和angularjs（不在一起），看看我想建立在...

我在jQuery的移动问题。当您提交表单，而不是简单地动态更新列表，它刷新并清除网页：

<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的理解。

来源

2013-07-03 Joe Lannen

您可以移动的按钮表单或停止形式从提交的全部，例如

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

这将停止刷新。

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

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

如果你使用点击移动设备上的处理程序将推迟点击200毫秒，这是很多，所以使用V单击，您可以阅读有关V单击here

来源

2013-07-04 02:09:10 abdu

jquery mobile有点令人困惑，你还应该熟悉jq mobile中的页面转换，标签之前的

这个属性添加：

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-03 22:01:06 Gajotres

它仍然刷新页面。它从输入中动态显示文本，但是你会看到一个快速的“？”附加到浏览器中的URL上，并刷新页面。 –

也尝试了在你ref'd答案的方法，仍然刷新。奇怪的。也许这是我使用角度的标志:) –

尝试 event.preventDefault（） ;

而不是返回false;

来源

2014-02-04 18:35:34

这对我有效，但我必须意识到我把它放在哪里。该声明通过放置在.post（）后面工作。行，不在其中。 – Daydah

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

回答

相关问题