javascript - jQuery 单击/触摸事件不会在移动设备中触发(内联元素)

Question

我有一个 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 监听器的其他元素工作得很好。控制台上也没有显示任何错误。顺便说一句，一切似乎都可以在桌面上运行。

我知道这个问题之前已经被反复问过，但在这种情况下我似乎找不到解决方案。任何有关如何解决此问题的见解都将受到赞赏。

Answer 1

我能够通过添加解决该问题

display:inline-block

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

感谢t.niese寻求提示!