jQTouch excute javascript code when going to next page
-
26-09-2019 - |
문제
I have been working on an iPhone app that requires me to dynamically change the content. I have the following code:
<div id="home">
<div class="toolbar">
<a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
<h1>AllaccessMD</h1>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
When this page gets called I call the javascript function:
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ulHome li a').click(function(){
alert('I dont see this alert on a iPhone!');
if(this.href.search("#ePresentations") != 0) {
var idObject = getID(this.id);
setupEPresentation(idObject.id);
}
});
}
This all works fine except the $('#ulHome li a').click() doesn't work. It works fine on Firefox and Chrome, but not on a iPhone.
Where did I go wrong? OR is there a better way to implement this?
Thanks!
해결책
Use tap instead of click, also the auto change page function is going to override your links since they have an href location. Also I wouldn't mix javascript in the code with events in the javascript, so:
<div id="home">
<div class="toolbar">
<a id="logoutButton" class="blueButton" href="#">Logout</a>
<h1>AllaccessMD</h1>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
and
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a class="Presentation" id="s,' + localStorage.userID + '" href="#">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" data="#">My Newsletter</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">My Events</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Medical Partners</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Search</a></li>'
+ '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Medical Partners</a></li>'
+ '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Search</a></li>'
+ '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ulHome li a').tap(function(){
alert('I dont see this alert on a iPhone!');
if(this.hasClass("Presentations") ) {
var idObject = getID(this.id);
setupEPresentation(idObject.id);
}
});
$('#logoutButton').tap(function() {
$('#logout').show();
});
제휴하지 않습니다 StackOverflow