jQuery Click不適用於錨元素上的庫存Android Mobile Browser

Question

就像標題所示，我正在努力在鏈接元素上觸發click事件。

我具有以下HTML結構（我只是在報告感興趣的部分）：

<!-- Table markup here.. -->
<td class="text-center">
  <a class="text-danger"><i class="fi-trash" aria-hidden="true" player-id="108"></i></a>
  <a class="text-muted"><i class="fi-x hide" aria-hidden="true" player-id="108"></i></a>
  <input value="" name="" type="hidden">           
</td>
<!-- More table markup here -->

基本上，我試圖在i.fi-trash和i.fi-x上i.fi-trash click事件，以使i.fi-trash在加載頁面時顯示，並且當我單擊它時，它是隱藏的並顯示i.fi-x 。

$(document).ready(function(){
  $('i.fi-trash').click(function(){
    //Do stuff
    $(this).addClass('hide');
    $(this).parent('a').siblings('a').children('i.fi-x').removeClass('hide');
  });
  $('i.fi-x').click(function(){
    //Do other stuff
    $(this).addClass('hide');
    $(this).parent('a').siblings('a').children('i.fi-trash').removeClass('hide');    
  });
});

除了普通的android瀏覽器，這在所有瀏覽器中都可以正常工作。

我嘗試將vclick與jquery mobile結合使用，什么也沒有。

我嘗試將點擊事件移動到a標簽上，什么也沒有。

我試過使用其他事件，例如tap ， bind ，但是似乎沒人能用。

我嘗試從jQuery 2切換到jQuery 1.9，什么也沒有。

唯一有效的方法是將TD事件移到TD元素上，但是隨后我需要做一些檢查以查看必須激活的兩個i元素中的哪一個。

有什么幫助嗎？

Answer 1

您正在測試的手機是什么，Android版本是什么？

我遇到了一個小問題，在Sony的默認移動瀏覽器（在Xperia Z3緊湊型電腦上）上無法運行，但在ASUS Zenfone 2的默認瀏覽器上可以正常工作...

據我所知，制造商會隨意創建此移動瀏覽器，因此不同的手機可能會有所不同

Answer 2

在尋求幫助后，您便找到了解決方案...

為了快速回復各種評論，詢問我在哪個平台上測試了我的代碼：我確定知道在帶有庫存瀏覽器的現貨AOSP android 4.2.1和4.2.2上存在此問題。 可能還會在股票AOSP android 4.4.4和基於CM的4.4.4 rom上（始終使用android瀏覽器）。

事實證明，除非包含字體形式的圖標a元素（如Foundation圖標），以及span和i元素（用於呈現這些圖標），否則股票android瀏覽器無法觸發click事件（可能還有其他事件），除非您將添加到CSS元素display: inline-block 。

當我發現具有Bootstrap css和圖標（而不是像我這樣的Foundation css和圖標）的完全相同的HTML不受此問題影響時，我找到了解決方案。

實際上， .glyphicon Bootstrap類已定義了此規則（您可以查看核心CSS文件）。

不幸的是，由於我使用的是Zurb Foundation，所以我的CSS中沒有這一行（ span和i元素在Foundation中具有最小的樣式），並花費了數小時來嘗試解決此愚蠢的問題。

因此，就我而言，我以以下方式修改了CSS：

i[class^="fi-"],
i[class*=" fi-"],
span[class^="fi-"],
span[class*=" fi-"]{
  display: inline-block;
}

這應該針對用於Foundation圖標的每個span或i元素。