У меня есть мобильное приложение, которое я разработал с использованием PhoneGap (и html / css / javascript), и есть часть приложения, которая использует список, и я хочу, чтобы при нажатии или нажатии li происходило срабатывание события click.
Странно то, что он отлично работает при тестировании в Chrome с Ripple, отлично работает на Android и BlackBerry, но в iOS - нет.
Вы можете попробовать приложение здесь:
Android - https://market.android.com/details?id=com.viethconsulting.ALIVEapp
iOS - http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&mt=8
BlackBerry - все еще ждет одобрения App World.
Если вы посмотрите на календарь событий (помеченный «Календарь событий» в меню), что события перечислены в таблице и имеют маленькие кнопки «развернуть» справа.
Вы заметите, что касание / нажатие строк в версии для iOS ничего не делает (хотя, если вы щелкнете по заголовку или значку раскрытия для каждой строки, это будет работать).
Понятия не имею, почему так происходит с iOS, а не с другими платформами. Есть идеи?
Вот несколько примеров моего кода:
$(function()
{
$("li.rssRow").live({
click: function(){
if($(this).attr("rel") != "loaded") {
$(this).append('<div><br />Loading Content...<br /></div>');
$(this).children("div:first").load($(this).children(":first").children(":first").attr("rel")+"&mobile_grab=true #mobile_grab");
$(this).attr("rel","loaded");
$(this).children('img:first').rotate({angle:0,animateTo:180});
$(this).children('img:first').attr("rel","180");
}
else {
RotateImage($(this).children('img:first'));
$(this).children('div:first').slideToggle();
}
}
});
// Fix click functionality for calender item contact/map links on iOS devices
$('#span.c_data').live({
click: function() {
window.location = $(this).children("a:first").attr("href");
}
});
});
и связанный с ним HTML: (примечание: этот контент извлекается из другого приложения, но использует идентичный код, за исключением URL-адресов, но он также ведет себя точно так же).
<div id="body_content" class="rssFeed">
<div class="rssBody">
<ul>
<li class="rssRow odd" rel="loaded">
<h4><a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16646" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank">Dec 12, 2011: new event</a></h4>
<img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
<p></p>
<div style="display: none; ">
<div id="mobile_grab" style="display:none;">
<div class="c_row">
<span class="c_label">Event Name:</span>
<span class="c_data">new event</span>
</div>
<div class="c_row">
<span class="c_label">Description:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Event Date:</span>
<span class="c_data">12-12-11<br></span>
</div>
<div class="c_row">
<span class="c_label">Event Time:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Location:</span>
<span class="c_data">
Grand Ledge Opera House<br>121 S. Bridge Street<br>Grand Ledge, MI 48837<br><br>
<a target="_blank" href="http://maps.google.com/maps?q=121+S.+Bridge+Street,Grand+Ledge,MI%2048837%20us">click here for Google Maps</a>
</span>
</div>
<div class="c_row">
<span class="c_label">Contact Person:</span>
<span class="c_data"></span>
</div>
<div class="c_row">
<span class="c_label">Event Registration:</span>
<span class="c_data">
<a target="_blank" href="http://mms.anytownbusinessnetwork.org/members/evr/regmenu.php?orgcode=BUSI">Click here to register for events...</a><br>
</span>
</div>
<div class="c_row" style="display:none;">
<span class="c_label">Outlook/vCalendar:</span>
<span class="c_data">click on the date(s) to add to your calendar:<br><a href="vcalendar.php?cdid=46852">12-12-11</a><br></span>
</div>
<div class="c_row" style="display:none;">
<span class="c_label">Email Reminder:</span>
<span class="c_data">
<a href="event_reminder.php?eid=20345979&org_id=BUSI">setup an email reminder for this event</a>
</span>
</div>
</div>
</div>
</li>
<li class="rssRow even">
<h4><a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16357" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank">Jan 30, 2012: new event</a></h4>
<img src="assets/img/expand_result.gif" class="expand" rel="0">
<p></p>
</li>
</ul>
</div>
</div>
Заранее благодарим за любую помощь, которую вы можете предложить.
Кроме того, это может быть не самый эффективный подход, поэтому я приветствую предложения по улучшению javascript. HTML, который я не могу сделать много, хотя.