所有点击事件都会像他们应该的那样工作一段时间但是当我点击" GROUPS>年轻人"输入我跳到第一页(我可能会添加此输入甚至没有连接到它的链接)突然间,组链接的点击事件停止工作。 我仍然可以创建新的群组,但无法点击任何链接。我正在使用jquery mobile和phonegap以及DOM来从组中获取组和人员。还使用Web SQL在本地存储/获取数据。
它在桌面上应该像它一样工作,它只发生在ipad和iphone上。
获取所有群组:
var gruppidn = [];
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM grupp;', [],
function(transaction, result) {
if (result != null && result.rows != null) {
var inn = "<ul id='ulitems'>"; //
for (var t = 0; t < result.rows.length; t++) {
var row = result.rows.item(t);
grupper.push(row.FirstName);
localStorage.setItem(row.UserId+"namn", row.FirstName);
inn += "<li data-icon='plus'><a id='gruppen"+t+"' href='#page2' class='fikon' onClick='' data-transition='none'><div style='height: 50px;background: #396B9E;padding: 10px;width:0px;float:Left;'>";
inn += "<img src='img/hands.png' width='30' height='30' style='margin-left:20px; top: 50%; left: 50%; margin-top: -18px'/></div><h2 style='margin-top:0px'>" + row.FirstName+ "</h2></a></li>";
gruppidn.push(row.UserId);
}
inn += "</ul>";
$('#lbUsers').html(inn);
for (var p = 0; p < gruppidn.length; p++) {
grupperclickevents(p, gruppidn[p]);
}
gruppidn = [];
}
},errorHandler);
},errorHandler,nullHandler);
return;
}
向所有DOM对象(组)添加click事件
function grupperclickevents(listid, gruppid){
$("#gruppen"+listid).off();
$("#gruppen"+listid).on('click', function(event) {
fetchperson(gruppid);
$.mobile.changePage( "#page2", { transition: "none", changeHash: false });
// this fires once on all devices
});
}
如果点击一个群组= fetchperson功能激活所有人 该组的回归
function fetchperson(idofgroup){
var dnam = localStorage.getItem(idofgroup+"namn");
localStorage.setItem("opengroup", idofgroup);
Listpersonofg(idofgroup);
//console.log(idofgrupp);
$('#namn').html(dnam);
}
然后到引入错误的按钮(第一次使用它时工作正常,当你使用页面一段时间后,它就会存储在客户端上)
$('#page2').on('pageinit', function() {
$( "#klicksel" ).off();
$("#klicksel").on('touchend click', function(event) {
event.stopPropagation();
event.preventDefault();
selectwinner(1);
// this fires once on all devices
});
//below is if you add a new person, an input field first appears
$( "#clickd" ).off();
$("#clickd").on('touchend click', function () {
if(noaddp == true){
toggleinputfield();
}
});
//enter on input to add new person (below)
$('#newadd2').on('keyup', function(e) {
var pername = $("#newadd2").val();
var svalue = $(this).val();
if (e.which == 13) {
if(pername == ""){
console.log("Skriv in ett namn");
}else{
var opengr = localStorage.getItem("opengroup");
AddPersonToGroup(opengr);
}
toggleinputfield();
}
});
});
var noaddp = true;
function toggleinputfield(){
if(noaddp == true){
noaddp = false;
$("#newadd2").css({"display":"block"});
$("#addpeep").css({"display":"none"});
document.getElementById("newadd2").focus();
}else{
$("#newadd2").css({"display":"none"});
$("#addpeep").css({"display":"block"});
noaddp = true;
}
}
HTML
<div data-role="page" class="container" id="page1">
<div data-role="header" class="ui-bar ui-bar-b">
</div>
<div data-role="main" class="ui-content">
<article style="position:relative">
<ul data-role="listview">
<li data-role="button" data-theme="b" data-icon="plus" id="click"><h1 id="newg"><span id="addgriup">Add Group</span><input type="text" maxlength="25" placeholder="Group Name" id="newadd"/></h1></li>
</ul>
</article>
<div id="lbUsers">
<div id="status"></Div>
</div>
<div data-role="footer" data-position="fixed">
<p style="text-align:center">© Christopher Jubell 2016</p>
</div>
</div>
</div>
<div data-role="page" class="container" id="page2">
<div data-role="header" class="ui-bar ui-bar-b">
<a href="#page1" style="z-index:100;" id="deletegrupp" data-icon="delete" data-transition="none">Delete</a>
<a href="#page1" style="z-index:100;" data-icon="home" data-transition="flip">Groups</a>
</div>
<div data-role="main" class="ui-content">
<article>
<ul data-role="listview">
<li data-role="button" data-theme="b" data-icon="plus" id="clickd"><h1 id="newg"><span id="addpeep">Groups > <span id="namn"></span></span><input type="text" maxlength="25" placeholder="Name" id="newadd2"/></h1></li>
</ul>
</article>
<div id="lbdelt">
<div id="status"></Div>
</div>
<div data-role="footer" data-position="fixed"><h1>Who can Pray? Click the icon</h1>
<div class="centert"><a id="klicksel" data-role="button"><div class="circledot">
<img src="img/hands.png" width="30" height="30" style="position: absolute; top: 50%; left: 50%; margin-left: -18px; margin-top: -18px"/></div></a></div>
<p style="text-align:center">© Christopher Jubell 2016</p>
</div>
</div>
</div>