防止jQuery Mobile的提交按钮刷新页面
我是一个完全的编程新手，完全不知道我在做什么。。。我已经将一些代码粘贴到使用jQuery移动框架的网站中，以构建我在网上找到的地址簿。问题是在提交表单时，页面会刷新。为了防止这种情况发生，我想我可能需要添加“returnfalse；”但我不确定。。。任何建议都将不胜感激防止jQuery Mobile的提交按钮刷新页面,jquery,forms,jquery-mobile,refresh,Jquery,Forms,Jquery Mobile,Refresh,我是一个完全的编程新手，完全不知道我在做什么。。。我已经将一些代码粘贴到使用jQuery移动框架的网站中，以构建我在网上找到的地址簿。问题是在提交表单时，页面会刷新。为了防止这种情况发生，我想我可能需要添加“returnfalse；”但我不确定。。。任何建议都将不胜感激 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>
<link rel="stylesheet" href="themes/tya.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link href="themes/mycss.css" rel="stylesheet" type="text/css">
<script>
function save() {
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
function load() {
var storedValue = localStorage.getItem('text');
if (storedValue) {
document.getElementById('textfield').value = storedValue;
}
}
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body onload="load()">
<!-- Start of first page: #one -->
<div data-role="page" id="home">
<img src="images/tya-logo.png" alt="TYA Logo" width="121" height="84" class="logo">
<!-- /header -->
<!-- MENU -->
<div data-role="content" >
<div data-role="controlgroup">
<a href="#blogs" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Blogs</a>
<a href="#blood" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Bloods</a>
<a href="#contacts" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Contacts</a>
<a href="#documents" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Documents</a>
<a href="#maps" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Maps</a>
<a href="#links" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Links</a>
</div>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<h4>© 2013 Teenage & Young Adults Leeds</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- BLOGS -->
<div data-role="page" id="blogs" data-theme="a">
<div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
<h1>Blogs</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<h4>© 2013 Teenage & Young Adults Leeds</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- BLOODS -->
<div data-role="page" id="blood">
<div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
<h1>Bloods</h1>
</div><!-- /header -->
<table id="contacts-table">
<tr id="contacts-head">
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</table>
<form id="contacts-form">
<div class="item text">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" /></div>
</div>
<div class="item text">
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" /></div>
</div>
<div class="item text">
<label>Email:</label>
<div class="field"><input type="text" name="email" /></div>
</div>
<div class="button-wrapper">
<div class="item button">
<div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>
</div>
<div class="item button button-default">
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<!-- SCRIPT FOR FORM FUNCTIONALITY -->
<script>
var Contacts = {
index: window.localStorage.getItem("Contacts:index"),
$table: document.getElementById("contacts-table"),
$form: document.getElementById("contacts-form"),
$button_save: document.getElementById("contacts-op-save"),
$button_discard: document.getElementById("contacts-op-discard"),
init: function() {
// initialize storage index
if (!Contacts.index) {
window.localStorage.setItem("Contacts:index", Contacts.index = 1);
}
// initialize form
Contacts.$form.reset();
Contacts.$button_discard.addEventListener("click", function(event) {
Contacts.$form.reset();
Contacts.$form.id_entry.value = 0;
}, true);
Contacts.$form.addEventListener("submit", function(event) {
var entry = {
id: parseInt(this.id_entry.value),
first_name: this.first_name.value,
last_name: this.last_name.value,
email: this.email.value
};
if (entry.id == 0) { // add
Contacts.storeAdd(entry);
Contacts.tableAdd(entry);
}
else { // edit
Contacts.storeEdit(entry);
Contacts.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
}, true);
// initialize table
if (window.localStorage.length - 1) {
var contacts_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/Contacts:\d+/.test(key)) {
contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (contacts_list.length) {
contacts_list
.sort(function(a, b) {
return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
})
.forEach(Contacts.tableAdd);
}
}
Contacts.$table.addEventListener("click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
Contacts.$form.first_name.value = entry.first_name;
Contacts.$form.last_name.value = entry.last_name;
Contacts.$form.email.value = entry.email;
Contacts.$form.id_entry.value = entry.id;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
Contacts.storeRemove(entry);
Contacts.tableRemove(entry);
}
}
event.preventDefault();
}
}, true);
},
storeAdd: function(entry) {
entry.id = Contacts.index;
window.localStorage.setItem("Contacts:index", ++Contacts.index);
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
},
storeEdit: function(entry) {
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
},
storeRemove: function(entry) {
window.localStorage.removeItem("Contacts:"+ entry.id);
},
tableAdd: function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute("id", "entry-"+ entry.id);
Contacts.$table.appendChild($tr);
},
tableEdit: function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML = "";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove: function(entry) {
Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
}
};
Contacts.init();
</script>
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>
jquerymobile：主题下载
函数save（）{
var fieldValue=document.getElementById（'textfield'）.value；
setItem（'text'，fieldValue）；
}
函数加载（）{
var storedValue=localStorage.getItem（'text'）；
if（存储值）{
document.getElementById（'textfield'）。value=storedValue；
}
}
&抄袭；2013年利兹青少年和青年
博客
两个
&抄袭；2013年利兹青少年和青年
血迹
身份证件
名字
姓
电子邮件
行动
名字：
姓氏：
电邮：
var触点={
索引：window.localStorage.getItem（“联系人：索引”），
$table:document.getElementById（“联系人表”），
$form:document.getElementById（“联系人表单”），
$button_save:document.getElementById（“联系人操作保存”），
$button_discard:document.getElementById（“联系人op discard”），
init:function（）{
//初始化存储索引
如果（！Contacts.index）{
window.localStorage.setItem（“Contacts:index”，Contacts.index=1）；
}
//初始化表单
联系人。$form.reset（）；
Contacts.$button_discard.addEventListener（“单击”），函数（事件）{
联系人。$form.reset（）；
联系人。$form.id\u entry.value=0；
}，对）；
联系人.$form.addEventListener（“提交”），功能（事件）{
变量项={
id:parseInt（this.id\u entry.value），
first\u name:this.first\u name.value，
last_name:this.last_name.value，
电子邮件：this.email.value
};
如果（entry.id==0）{//add
Contacts.storeAdd（条目）；
联系人。表格添加（条目）；
}
else{//edit
Contacts.storeEdit（条目）；
联系人。表格编辑（条目）；
}
这是reset（）；
this.id_entry.value=0；
event.preventDefault（）；
}，对）；
//初始化表
if（window.localStorage.length-1）{
var contacts_list=[]，i，键；
对于（i=0；ib.id-1:0）；
})
.forEach（Contacts.tableAdd）；
}
}
Contacts.$table.addEventListener（“单击”），函数（事件）{
var op=event.target.getAttribute（“数据op”）；
如果（/edit | remove/.test（op））{
var entry=JSON.parse（window.localStorage.getItem（“联系人：”+event.target.getAttribute（“数据id”）））；
如果（op==“编辑”）{
联系人。$form.first\u name.value=entry.first\u name；
联系人。$form.last_name.value=entry.last_name；
联系人。$form.email.value=entry.email；
联系人。$form.id\u entry.value=entry.id；
}
否则如果（op==“删除”）{
如果（确认（'您确定要从您的联系人中删除“'+entry.first\u name+''+entry.last\u name+”））{
联系人。删除（条目）；
联系人。表格删除（条目）；
}
}
event.preventDefault（）；
}
}，对）；
},
storeAdd:函数（条目）{
entry.id=Contacts.index；
setItem（“Contacts:index”，++Contacts.index）；
setItem（“联系人：+entry.id，JSON.stringify（entry））；
},
storeEdit:函数（条目）{
setItem（“联系人：+entry.id，JSON.stringify（entry））；
},
storeRemove:函数（条目）{
window.localStorage.removietem（“联系人：+entry.id”）；
},
tableAdd:函数（条目）{
var$tr=document.createElement（“tr”），$td，key；
event.preventDefault();
Contacts.$form.addEventListener("submit", function(event) {
event.preventDefault();
...
});
function save() {
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
return false;
}
<input type="submit" id="contacts-op-save" value="Save" click="return save()" />
$('form_id/class').on('submit',function(e){
e.preventDefault();
//logic goes here.....
})