Why won't click events work for elements on iOS?

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!