javascript - 为什么 Click 事件不适用于 iOS 上的 li 元素？

Question

我有一个使用 PhoneGap(和 html/css/javascript)开发的移动应用程序，该应用程序的一部分使用列表，我希望在触摸/点击 li 时触发点击事件。

奇怪的是，它在带有 Ripple 的 Chrome 中测试时工作正常，在 Android 和 BlackBerry 上工作正常，但在 iOS 中它不会。

您可以在此处试用该应用:安卓 -- https://market.android.com/details?id=com.viethconsulting.ALIVEappiOS -- http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&mt=8BlackBerry -- 仍在等待 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&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>

在此先感谢您提供的任何帮助。

此外，这可能不是最有效的方法，因此我也欢迎提出改进 javascript 的建议。不过，我无法对 HTML 做很多事情。

Answer 1

我建议将整个 LI 内容包装到 n A 元素中，并在那里管理你的点击事件 - JQuery Mobile 也这样做 - 通过使用样式你可以确保一切按顺序呈现，并且它可以在任何浏览器中工作(移动/桌面也是如此)，因为它只是一个标准的 A 标签...

例如

<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>

希望这对您有所帮助!