CODEWITHSUNDEEP
javascriptjqueryhtmlmobilegoogle-chrome-devtools
hodgef
hodgef

Reputation: 1436

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

I have a span element which when clicked/touched should trigger certain actions in jQuery.

enter image description here

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.

Upvotes: 1

Views: 1527

Answers (1)

hodgef
hodgef

Reputation: 1436

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!

Upvotes: 2

Related Questions