Question

正如标题所示，我正在努力在链接元素上触发点击事件。

我有以下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，并点击它，它被隐藏，并显示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标签上移动click事件，没有。

我尝试使用其他活动，例如tap，bind，但似乎没有人可以使用。

我尝试从jQuery 2切换到jQuery 1.9，没有。

唯一有效的方法是在TD元素上移动click事件，但是我需要做一些检查以查看我必须激活的两个i元素中的哪一个。

任何帮助？

Answer 1

你正在测试什么手机以及什么是Android版本？

我有一个熟悉的问题，它不适用于索尼的默认移动浏览器（在Xperia Z3紧凑型），但在华硕Zenfone 2默认浏览器上工作正常......

据我所知，制造商会随意创建这款移动浏览器，因此手机可能会有所不同

Answer 2

And just after you ask for help, you find the solution...

To quickly reply to the various comments asking on which platform I tested my code: I know for sure that on stock AOSP android 4.2.1 and 4.2.2 with stock browser the issue is present. Likely also on stock AOSP android 4.4.4 and CM based 4.4.4 roms (always with android browser).

It turns out stock android browser is not able to fire click events (and probably any other event) on a elements containing icons in the form of font (like Foundation icons), and on span and i elements (used for rendering these icons) unless you add to your css element display: inline-block .

I found out the solution when I noticed that the same exact HTML with Bootstrap css and icons (instead of Foundation css and icons like in my case) was not affected by the problem.

In fact, .glyphicon Bootstrap class has this rule defined (you can take a look at the core CSS file).

Unfortunately, since I'm using Zurb Foundation, I didn't have this line in my css ( span and i elements have minimal style with Foundation) and spent hours trying to fix this silly problem.

So, in my case, I modified the CSS in the following way:

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

This should target every span or i element used for Foundation icons.

jQuery点击不支持锚定元素

2 个答案: