mason81 mason81 - 4 months ago 5
jQuery Question

Why wont Click events work for li elements on iOS?

I have a mobile app that I developed using PhoneGap (and html/css/javascript) and there is a part of the app that uses a list and I want to have a click event fire when the li is touched/clicked.

The weird thing is that it works fine when testing in Chrome w/Ripple, works fine on Android and BlackBerry, but in iOS it wont.

You can try out the app here:
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 -- Still waiting for App World approval.

If you look at the events calendar (labeled "Events Calendar" in the menu) that the events are listed in a table and have little "expand" buttons to the right.

You'll notice that touching/clicking the rows in the iOS version does nothing (though if you click the heading or the expand icon for each row it will work).

I have no idea why this is the case with iOS and not the other platforms. Any ideas?

Here are some examples of my code:

$(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");
}
});
});


and the related HTML: (note: this content pulled from a different app, but uses identical code with exception of urls, yet it behaves exactly the same as well).

<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&amp;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>


Thanks in advance for any help you can offer.

Also, this may not be the most efficient approach, so I welcome suggestions for improving the javascript as well. The HTML I can't do a whole lot about though.

Answer

I would suggest wrapping your WHOLE LI content into n A element, and manage your click event there - JQuery Mobile does this as well - by using styling you can make sure everything is rendered in order, and it WILL work in ANY browser (mobile/desktop as well), since it's just a standard A tag...

e.g.

<li class="rssRow odd" rel="loaded">
    <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"><h4>Dec 12, 2011: new event</h4>
       <img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
        ......
     </a>
</li>

Hope this helps!

Comments