爲什麼不能點擊iOS上的li元素事件？

我有一個使用PhoneGap（和html/css/javascript）開發的移動應用程序，並且存在使用列表的應用程序的一部分，並且當點擊觸摸li時我想要點擊事件觸發。爲什麼不能點擊iOS上的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 黑莓 - 仍在等待應用程序世界批准。

如果您查看事件日曆（在菜單中標記爲「事件日曆」），事件在表中列出並且右側沒有「展開」按鈕。

你會注意到，觸摸/點擊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我不能做很多。

來源

2011-12-13 mason81

我建議將你的WHOLE LI內容包裝到n A元素中，並在那裏管理你的點擊事件--JQuery Mobile也這樣做 - 通過使用樣式你可以確保所有東西都是按順序呈現的，並且它可以在ANY瀏覽器（手機/臺式機），因爲它只是一個標準的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>

希望這會有所幫助！

來源

2011-12-14 15:08:44 Leon

我曾經考慮過，但不會干擾其他A標籤（LI標籤的子代和孫代）？我相信技術上嵌套錨/鏈接是無效的HTML每W3C。此外，我仍然不明白爲什麼click/onclick事件不適用於iOS，但可以用於其他任何事情...... – mason81

我打算將您的標記標記爲正確的答案，因爲您至少嘗試了答案。我最終重新調整了JavaScript，以至於它沒有使用'live'，而是顯然它不是按照我的意圖工作的。我認爲你的答案已經足夠接近了，但我不認爲嵌套A（錨點/鏈接）標籤是一個好方法，因爲我需要LI標籤內的A標籤，所以我需要一個不同的解決方案。再次感謝。 – mason81

cursor:pointer;

將此樣式添加到li標籤。

來源

2016-07-28 18:11:34 bangde

爲什麼不能點擊iOS上的li元素事件？

回答

相關問題