0

So I have an issue with an event firing and doing what its supposed to on desktop but on mobile it won't fire at all. Essentially I have 2 links(Hide & Report). When clicked they send the ids to the Jquery function that sends to php and updates the database. Works on the desktop browsers without issue, but not on mobile. Here is the problematic code:

if(isset($_SESSION['member_session'])){ 
    echo'
    <a class="dropdown-toggle pull-right moreForumBtn" id="menu1-'.$row['topic_id'].'" data-toggle="dropdown"><i class="fa fa-ellipsis-v moreSelect"></i></a>
    <ul class="dropdown-menu pull-right" style="z-index: 99;"role="menu" aria-labelledby="menu1-'.$row['topic_id'].'">
        <li role="presentation"><a class="fullClickLink hideForumTopic" data-hideForumTopicUser-id="'.$row['user_id'].'" data-hideForumTopicID-id="'.$row['topic_id'].'"><i class="fa fa-eye-slash"></i> Hide</a></li>
        <li class="divider"></li>                                               
                                        ';
    if($queryReport->rowCount() > 0){

        echo'<li role="presentation"><span style="margin-left:20px;"><i class="fa fa-flag" style="color:#cc0000;"></i> Reported</span></li>';

    }else{
        echo'
            <li role="presentation"><a class="reportUser reportUserMsg" data-rptUser-id="'.$row['user_id'].'" data-msgReport-id="'.$row['topic_id'].'"><i class="fa fa-flag"></i> Report as spam</a></li>   
        </ul>                                           
        ';
    }
}

Here is the function that sends the data to an AJAX call, this function will not fire on mobile for some reason. Is there a specific way for mobile to handle li and anchor onclicks or something, because I have a ton of click events that all work on mobile. Its just this li/hover click event not working.

$(".hideForumTopic").on("click touchstart", function(){
    var userid = $(this).attr("data-hideForumTopicUser-id");
    var hideTopic = $(this).attr("data-hideForumTopicID-id");

    alert("TEST");

    //hideTopicUser(userid, hideTopic);
});

Here is an image of the links for clarity enter image description here

Appreciate any info. Thanks. Edited with touchstart added but it stil ldoes not fire on my android phone.

Solution: Problem was with the style (z-index) added to the unordered list. once set to z-index:998; it worked.

Stuckfornow
  • 280
  • 1
  • 15
  • Yeah, its inside the doc ready. Also @mplungjan, i tried that but that does not work. I am testing it on my Samsung S9, i'm not sure if version would be an issue with something like this. – Stuckfornow Dec 29 '19 at 22:15
  • Could there be any other reason why it would fire on desktop browser but not on mobile? On the browser I can hide all the items or report them all and everything does what it should, on my phone though, I tried samsung browser, default google and desktop version on phone...None of them are firing the jquery event – Stuckfornow Dec 29 '19 at 22:20
  • 1
    @mplungjan just because the titles are similar doesn't make two questions duplicates. Minimal effort please, read them both before using Mjolnir. The click event should work just fine on mobile. – Kaiido Dec 29 '19 at 22:27
  • @Stuckfornow can you try to make a live example? https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do – Kaiido Dec 29 '19 at 22:29
  • Sure, ill try to create a fiddle – Stuckfornow Dec 29 '19 at 22:32
  • 1
    Thanks for the help everyone, I figured out the issue. It was actually a very stupid oversight on my part that took way too long to firgure out. I had the
      set with a style z-index:99 which would allow the button to be displayed properly but when clicked it just closed the dropdown. The click function had been working properly.
     – Stuckfornow Dec 29 '19 at 22:48
  • @Kaiido when it was posted it had all the hallmarks of a dupe. After several revisions it’s turned into a z-order issue which was not at all obvious without HTML/CSS - the effort could have been to provide a [mcve] which I would have tested with touchstart and seen it was not a dupe of a faq and hence not close with that dupe but perhaps have found another dupe or answered in a comment and closed as “not reproducible after changing zinder” – mplungjan Dec 30 '19 at 05:41
  • @Stuckfornow - a fiddle would have been great. Normally you can use the stack snippets but they do not work on mobile browsers. – mplungjan Dec 30 '19 at 07:03
  • 1
    @mplungjan, thanks for the tips. I'll definitely try building a fiddle next time. While building the fiddle for this one, I discovered the issue so it likely would have saved me some time in the end. – Stuckfornow Dec 30 '19 at 21:34

0 Answers0