Question

我有一个移动应用程序，我使用PhoneGap（和html / css / javascript）开发，并且有一部分应用程序使用列表，我希望触摸/点击li时点击事件。

奇怪的是，它在使用Chrome w / 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 黑莓 - 仍在等待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 :(请注意：此内容来自不同的应用，但使用相同的代码但网址除外，但它的行为完全相同）。

<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

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

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>

希望这有帮助！

Answer 2

cursor:pointer;

将此样式添加到li标签。

为什么点击事件不适用于iOS上的li元素？

2 个答案: