[FIXED] Click event not working in mobile

Issue

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)

Solution

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

Answered By - neahan
Answer Checked By - Katrina (JavaFixing Volunteer)