jQuery click/touch events won't fire in mobile (inline element)

Question

I have a span element which when clicked/touched should trigger certain actions in 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);
      }
  });
});

The problem is that the event is never fired in mobile , despite other elements with jQuery listeners attached to them working just fine. No errors display on the console either. Everything seems to work in desktop, by the way.

I am aware this question has been asked repeatedly before, but in this instance I just don't seem to find a solution. Any insight into how to resolve this issue is appreciated.

Answer 1

I was able to resolve the issue by adding

display:inline-block

to .locationElementBtn . It seems that link hitspaces arent quite so visible for inline (span) elements on mobile, thus the jQuery events aren't fired. It probably has something to do with the element containing a font icon.

Thanks to t.niese for the hint!