jQuery onclick works in mobile emulation mode but not on an actual mobile device

Question

I have the following code : -

$(function () {

   $(document).on('click', '.lnk_homeTabSelect', function () {

       var panel = $(this).data("panel")
       $(".dv_panel_selected").fadeOut(200, function () {
           $("#" + panel).fadeIn(200)
           $(".dv_panel_selected").removeClass("dv_panel_selected")
           $("#" + panel).addClass("dv_panel_selected")
       })

    })

})

<div id="dv_tabs">
    <div><a class="lnk_homeTabSelect" data-panel="Panel1">Panel 1</a></div>
    <div><a class="lnk_homeTabSelect" data-panel="Panel2">Panel 2</a></div>
    <div><a class="lnk_homeTabSelect" data-panel="Panel3">Panel 3</a></div>
</div>


<div id="Panel1" class='dv_panel_selected'>Content for panel 1</div>
<div id="Panel2">Content for panel 2</div>
<div id="Panel3">Content for panel 3</div>

So clicking on a tab hides and shows the different panels. It works fine in all dektop browsers. I've also been testing in Chrome mobile emulation mode and it works fine there too. But it doesn't work on an actual mobile device, I've been testing on an Iphone 5 and an ipad mini. When you click on the tab in a mobile device nothing happens. I'd appreciate any ideas as to why this is the case.

you may try with [tap](https://api.jquerymobile.com/tap/) – gaetanoM Mar 26 '18 at 18:33 — gaetanoM, Mar 26 '18 at 18:33

score 0 · Answer 1 · answered Mar 26 '18 at 18:34

This issue may have something to do with fadeIn/fadeOut methods are not handled as expected by some mobile browsers. Change it to show/hide instead and see how it goes.

$(".dv_panel_selected").hide(200, function () {
     $("#" + panel).show(200);
     $(".dv_panel_selected").removeClass("dv_panel_selected");
     $("#" + panel).addClass("dv_panel_selected");
});

Matt · Answer 2 · 2018-03-26T21:26:35.163

0

I've found the answer.

Using this: -

$(".lnk_homeTabSelect").click(function () {

instead of this: -

$(document).on('click', '.lnk_homeTabSelect', function () {

Seems to have fixed it

edited Mar 26 '18 at 21:26

answered Mar 26 '18 at 18:40

Matt

215
1
11

Yeah those two pieces of code are *extremely* different. Actually the preferred version would be `$('.lnk_homeTabSelect').on('click', function(){ ... });` – Erik Philips Mar 26 '18 at 21:32

Erik Philips · Accepted Answer · 2018-03-27T16:12:05.390

This is non-performant code:

$(document).on('click', '.lnk_homeTabSelect', function () {

   var panel = $(this).data("panel")
   $(".dv_panel_selected").fadeOut(200, function () {
       $("#" + panel).fadeIn(200)
       $(".dv_panel_selected").removeClass("dv_panel_selected")
       $("#" + panel).addClass("dv_panel_selected")
   })
});

Because what you're telling the browser is..

Catch every single click event that bubbles up through every single DOMElement then check to see if that element is .dv_panel_selected.

Even when using dynamic dom element manipulation (adding/remove HtmlElements), nobody should be doing that. If you aren't doing dynamic element manipulation then you can simply do:

$('.lnk_homeTabSelect').on('click', function () {

   // add simi-colons at the end of your statements
   // its good programming practice and avoids 
   // https://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript
   var panel = $(this).data("panel"); // <- semicolon

   $(".dv_panel_selected").fadeOut(200, function () {
       // combine statements so you don't do multiple
       // lookups to the same elements, not a huge performance gain
       // but definitely helps with debugging and readability
       $("#" + panel)  
         .fadeIn(200)
         .addClass("dv_panel_selected");
       $(".dv_panel_selected").removeClass("dv_panel_selected");
   }); 
});

Thanks for the answer. What should I be using to detect a click if the element is dynamic?

Typically you'll add specific dynamic elements to another element. For example, adding input buttons to a form. So then the form becomes the container:

$('#myForm').on('click', 'input[type=button]', function() {
  var $this = $(this);
  //where $this = the input/button that was clicked
});

The goal is to reduce the number of parent elements the click event has to bubble up to the container. The more elements, the less performant the code is.

Thanks for the answer. What should I be using to detect a click if the element is dynamic? — Matt, Mar 27 '18 at 11:05

jQuery onclick works in mobile emulation mode but not on an actual mobile device

3 Answers3