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元素。