1

I have a list of staff profiles that uses jquery to filter it based on links selected in an index.

HTML: 

<ul id="staff-filtering-system">
    <li><a href="#" data-htb_role-filter="headmaster">Headmaster</a></li>
    <li><a href="#" data-htb_role-filter="assistant-headmaster">Assistant Headmaster</a></li>
    <li><a href="#" data-htb_role-filter="deputy-heads">Deputy Heads</a></li>
    ...
</ul>
<div class="staff_member" data-htb_role="headmaster" style="display: none;">...</div>

and uses this function to filter using this

JS:

$("#staff-filtering-system li a").click(function(e){
    e.preventDefault();
    var q = $(this).attr("data-htb_role-filter");
    //console.log(q);
    $("div.staff_member").each(function(){
        var that = $(this)
        if(that.attr("data-htb_role") == q){
            //console.log(that);
            that.show();
        }else{
            that.hide();
        }
    });
});

This works fine on desktop browsers, but not on mobile where tt mostly jumps to top of the page or does nothing.

After a quick google search I tried the following:

  1. Removing href="#" from each index link
  2. adding e.stopPropagation(); after e.preventDefault();
  3. rewriting the click() method as on("touchstart click")
  4. adding return false before the closing bracket of $("div.staff_member")...

Nothing seems to work

If I include alert(e.type) at the start. I sometimes get a touchstart event fired.

Any advice on what I should try next would be welcome.

I am testing on my mobile (Moto G5, Android 7, Chrome) and on BrowserStack ( Chrome on Samsung Galaxy S9/Android 8 and Chrome on Google Pixel 2/Android 8)

neahan
  • 87
  • 1
  • 7
  • 1
    Possible duplicate of [document .click function for touch device](https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device) –  Aug 28 '18 at 15:45
  • I notice that the binding of the click event disappears when the page is resized. – neahan Aug 29 '18 at 11:27

1 Answers1

0

There was another function that was manipulating the links, I just reapplied the click method afterwards.

neahan
  • 87
  • 1
  • 7