CODEWITHSUNDEEP
jqueryeventsmobilebuttonclick
guillaume coulbaux
guillaume coulbaux

Reputation: 53

jQuery mobile (click event)

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");
    }

});
});

Upvotes: 4

Views: 17678

Answers (2)

Derry White
Derry White

Reputation: 86

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

Upvotes: 6

Johan
Johan

Reputation: 35213

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')

Upvotes: 1

Related Questions