jQueryMobile 拆分列表视图中的图标在 Firefox 中没有响应，而包含拆分项则没有

Question

我有一个拆分列表视图

+---------------------+--------+
|                     |wwwwwwww|
| listview entry      |w icon w|
|                     |wwwwwwww|
+---------------------+--------+

可以缩减为this fiddle。右侧有一个按钮，绑定到一个功能。该按钮是一个被默认白色边框包围的图标（用“w”表示）。

我的期望：

• 函数被调用 (duh)。无论是单击图标，还是单击空白区域（因为它都是由同一个 A 实体生成的），而与浏览器无关。

我得到了什么：

• 在 Chrome 30.0.1599.69m 中按预期工作。
• 在 Firefox 24.0 中按预期工作，如果我点击空白处
• Firefox，点击正好在图标上，按钮改变状态（所以系统知道点击！）；但我的函数似乎没有被调用。

如果我使用带有href 的默认按钮，则不会发生这种情况（即使在 Firefox 中也不会）。例如the original basic fiddle by Gajotres 工作顺利。但我需要绑定一个函数，我想用on() 来做这个。

在研究触发的东西时，我发现了this article，虽然它对我不起作用，但却为我指明了正确的方向：

具有讽刺意味的是，它实际上是一个 CSS 问题（使用 Z-index），而不是一个事件问题；

这样我就可以设计一个解决方法（该行在代码中被注释；只需取消注释并再次单击“运行”）。

这是 jQuery(Mobile) 中的错误吗？还是在 Firefox 中？或者，这似乎更有可能，只是 I'm doing it wrong？

Answer 1

临时答案

显然这是 Firefox 和 jQM 在 A 按钮不是“标准”时无法就对象的创建顺序达成一致的错误。图标的z-index不对，对象拦截点击不让它冒泡，这样按钮本身就什么也听不到了。

通过添加 z-index 校正 as per fiddle，Firefox 行为恢复正常。

$(".foo")
.off("click")
.on("click", function() {
    alert("ok");
    return false;
})
.find("span.ui-btn-inner").css("z-index", "-1")

或者简单地覆盖那些讨厌的内部按钮图标：

$("a.ui-li-link-alt span.ui-btn-inner").css("z-index", "-1")

重要：这个“解决方案”并没有解决真正的问题（无论是错误还是我的愚蠢），所以不能依赖它来工作，例如在 jQuery/jQM 的未来版本中。