jQuery mobile (click event)

Question

I'm developing smartphone hybrid applications.

I'm trying to hide/show a <div> with slideDown/slideUp.

When I click on the button, the menu <div> is supposed to hide/show depend of the context. Everything is working well on my computer but it just doesn't work at all on my mobile, nothing happens.

Here is my HTML code

<a class="btnMenuDyn" data-role="button">Masquer le menu</a>

and here my jQuery mobile code:

$(document).bind('pageinit', function(e){


// définition des variables
var btnMenuDyn = $('a.btnMenuDyn'),
    menuDyn = $('div.menuDyn');

$(btnMenuDyn).bind('click', function(){


    // condition pour afficher ou non le menu
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});
});

score 6 · Accepted Answer · edited May 23 '17 at 12:27

6

this problem is mobiles do not support click they use touchstart and touchend so can track movement if you still want to test on computers you can do this

$(btnMenuDyn).bind('touchstart mousedown', function(event){
    event.preventDefault();
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});

another question with same answer jquery touchstart in browser

more infomation can be found at http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

edited May 23 '17 at 12:27

Community

1
1

answered Jul 04 '12 at 16:34

Derry White

86
6

Yes it was touchstart to add, and e.preventdefault to get the perfect result. Thanks. – guillaume coulbaux Jul 05 '12 at 11:49
Be careful using touchstart. That can be triggered unintentionally when the user is trying to swipe to scroll. I'd recommend at least using touchend. Ideally you'd update the UI on touchstart and only act on touchend. I created a plugin which will do this [jquery-touchclick](https://github.com/tuxracer/jquery-touchclick) – tuxracer Apr 16 '13 at 21:22

score 1 · Answer 2 · answered Jul 04 '12 at 16:22

1

I would suggest using on() instead of bind()

And since youre doing this:

var btnMenuDyn = $('a.btnMenuDyn')

btnMenuDyn is a jquery dom element, so change this:

if ($(menuDyn).hasClass("menuDynHide"))

to this

if (menuDyn.hasClass("menuDynHide"))

And preferably declare jquery dom elements like this:

var $btnMenuDyn = $('a.btnMenuDyn')

answered Jul 04 '12 at 16:22

Johan

35,120
54
178
293

1

I would disagree with declaring jquery dom elements with the $ prefix, namely because of php's legacy usage of the $, whereas jquery just showed up recently. – dsdsdsdsd Mar 31 '13 at 19:28
+1 for using on instead of bind (see here why http://api.jquery.com/bind/) -1 for naming a variable with the $ prefix So the result is neutral :) – victorvartan Apr 23 '13 at 09:07
@victorvartan http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign But of course it comes down to personal preferences. If you don't like it, don't use it. – Johan Apr 23 '13 at 09:14
Yeah, I guess you're right, it is a matter of style. Perhaps because I'm working more with type-safe languages I see no good reason to use the hungarian notation. I guess the second half of my comment was too objective, so that leaves the +1 :) – victorvartan Apr 23 '13 at 11:29
@victorvartan It's actually the only time when I find it necessary to indicate the data type in Javascript. When it comes to comparing variables, I stick to `===` in JS, because it's eqvivalent to `==` in strongly typed languages. – Johan Apr 23 '13 at 11:38

jQuery mobile (click event)

2 Answers2

Linked