jQuery 点击/触摸事件不会在移动设备中触发（内联元素）答案

【问题标题】：jQuery click/touch events won't fire in mobile (inline element)jQuery 点击/触摸事件不会在移动设备中触发（内联元素）
【发布时间】：2015-03-16 20:08:37
【问题描述】：

我有一个 span 元素，当点击/触摸它时会触发 jQuery 中的某些操作。

HTML

<span id="" class="dwr_icon_location locationElementBtn"></span>

jQuery

$(document).ready(function(){
  // Location Button
  $(document).on("click touchstart",".locationElementBtn", function(){
      $(".locationBtn").toggleClass("active");

      // Displaying location window in the proper bar
      var locationBtn   = $(this).parent(".locationBtn");
      var locationStngs = $("#locationStngs");

      // if locationStngs doesn't exist in the current bar
      if(!locationBtn.children("#locationStngs").length){
        locationBtn.append(locationStngs);
      }
  });
});

问题是该事件永远不会在移动设备中触发，尽管附加了 jQuery 侦听器的其他元素工作得很好。控制台上也没有显示错误。顺便说一句，一切似乎都可以在桌面上运行。

我知道这个问题以前曾被反复问过，但在这种情况下，我似乎没有找到解决方案。任何有关如何解决此问题的见解都值得赞赏。

【问题讨论】：

这里它也不适用于非移动网站（Chrome 39）。只有当我在 .locationElementBtn 周围添加边框时它才会起作用，因为我很确定它与您的样式有关，可能在 inline 或类似的东西中有一个 block 样式元素。
@t.niese 我遇到了类似的问题。我是否清楚 ontouchstart 不适用于display: inline;？因为这似乎是唯一重要的事情。例如，如果我将其更改为display: block; - 它可以工作。如何显示 div 内联并使 ontouchstart 响应？我需要在没有新行的情况下拥有它。

标签： javascript jquery html mobile google-chrome-devtools

【解决方案1】：

我能够通过添加解决问题

display:inline-block

到.locationElementBtn。对于移动设备上的 inline (span) 元素，链接命中空间似乎不太明显，因此不会触发 jQuery 事件。它可能与包含字体图标的元素有关。

感谢t.niese 的提示！

【讨论】：