title: Why wont Click events work for li elements on iOS?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>You can try out the app here:
  Android -- <a href="https://market.android.com/details?id=com.viethconsulting.ALIVEapp" rel="nofollow">https://market.android.com/details?id=com.viethconsulting.ALIVEapp</a>
  iOS -- <a href="http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&amp;mt=8" rel="nofollow">http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&amp;mt=8</a>
  BlackBerry -- Still waiting for App World approval.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>I have no idea why this is the case with iOS and not the other platforms. Any ideas?</p>
  
  <p>Here are some examples of my code:</p>
  
  <pre><code>$(function()
  {
      $("li.rssRow").live({
          click: function(){
              if($(this).attr("rel") != "loaded") {
                  $(this).append('&lt;div&gt;&lt;br /&gt;Loading Content...&lt;br /&gt;&lt;/div&gt;');
                  $(this).children("div:first").load($(this).children(":first").children(":first").attr("rel")+"&amp;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");
          }
      });
  });
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>&lt;div id="body_content" class="rssFeed"&gt;
    &lt;div class="rssBody"&gt;
      &lt;ul&gt;
        &lt;li class="rssRow odd" rel="loaded"&gt;
          &lt;h4&gt;&lt;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"&gt;Dec 12, 2011: new event&lt;/a&gt;&lt;/h4&gt;
          &lt;img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); "&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div style="display: none; "&gt;
            &lt;div id="mobile_grab" style="display:none;"&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Event Name:&lt;/span&gt;
                &lt;span class="c_data"&gt;new event&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Description:&lt;/span&gt;
                &lt;span class="c_data"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Event Date:&lt;/span&gt;
                &lt;span class="c_data"&gt;12-12-11&lt;br&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
              &lt;span class="c_label"&gt;Event Time:&lt;/span&gt;
              &lt;span class="c_data"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Location:&lt;/span&gt;
                &lt;span class="c_data"&gt;
                  Grand Ledge Opera House&lt;br&gt;121 S. Bridge Street&lt;br&gt;Grand Ledge, MI  48837&lt;br&gt;&lt;br&gt;
                  &lt;a target="_blank" href="http://maps.google.com/maps?q=121+S.+Bridge+Street,Grand+Ledge,MI%2048837%20us"&gt;click here for Google Maps&lt;/a&gt;
                &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Contact Person:&lt;/span&gt;
                &lt;span class="c_data"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row"&gt;
                &lt;span class="c_label"&gt;Event Registration:&lt;/span&gt;
                &lt;span class="c_data"&gt;
                  &lt;a target="_blank" href="http://mms.anytownbusinessnetwork.org/members/evr/regmenu.php?orgcode=BUSI"&gt;Click here to register for events...&lt;/a&gt;&lt;br&gt;
                &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="c_row" style="display:none;"&gt;
                &lt;span class="c_label"&gt;Outlook/vCalendar:&lt;/span&gt;
                &lt;span class="c_data"&gt;click on the date(s) to add to your calendar:&lt;br&gt;&lt;a href="vcalendar.php?cdid=46852"&gt;12-12-11&lt;/a&gt;&lt;br&gt;&lt;/span&gt;
              &lt;/div&gt;  
              &lt;div class="c_row" style="display:none;"&gt;
                &lt;span class="c_label"&gt;Email Reminder:&lt;/span&gt;
                &lt;span class="c_data"&gt;
                  &lt;a href="event_reminder.php?eid=20345979&amp;amp;org_id=BUSI"&gt;setup an email reminder for this event&lt;/a&gt;
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="rssRow even"&gt;
          &lt;h4&gt;&lt;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"&gt;Jan 30, 2012: new event&lt;/a&gt;&lt;/h4&gt;
          &lt;img src="assets/img/expand_result.gif" class="expand" rel="0"&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for any help you can offer.</p>
  
  <p>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.</p>