3

I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click').

https://jsfiddle.net/lkw274/7zt1zL0g/87/

<div class="user-navigation">
        <a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>

$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
      e.preventDefault();
    $(".user-navigation a.mobile-menu-new").toggleClass("current");
    }); 
});

.current { background: #F00;}

Expected behaviour: On clicking 'Menu', either by touch or with clicked with mouse, the background is highlighted red until it is clicked again when the class should be removed, removing the red background and returning it to its original state.

Current behaviour: On clicking 'Menu', by touch on mobile/tablet device, the background is highlighted red however the class is not removed when 'menu' is clicked for the second time.

Could anyone help to understand how this code needs to be modified for tablet/mobile devices?

I have tried the solution in the below StackOverflow link however this did not function on click once implemented.

document-click-function-for-touch-device

Thanks in advance.

Community
  • 1
  • 1
lkw3274
  • 33
  • 1
  • 1
  • 3
  • 1
    Current code seems to work as expected on my iPhone. One thought: I usually put `e.preventDefault()` at the end of the function. Shouldn't make a difference though. – Ben Cole May 05 '15 at 15:54

4 Answers4

3

Looks like event delegation is the way to do this since, when you modify the target element, bind seems to fail.

Try the following (works on my iPhone/Chrome).

$(document).ready(function() {
    $(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});

Please note I have used .delegate since you seem to be using jQuery 1.6 (as per your fiddle) as otherwise, with jQuery 1.7+, you could use .on like below.

$(document).ready(function() {
    $(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});
lshettyl
  • 8,166
  • 4
  • 25
  • 31
3

add the cursor:pointer to the property of your class and it should work find in mobile

.user-navigation{ cursor:pointer }

Arian Al Lami
  • 867
  • 7
  • 9
1
$(selector).bind("click touchstart", function(){
       .......
});
Serjik
  • 10,543
  • 8
  • 61
  • 70
gem007bd
  • 1,085
  • 13
  • 11
  • 2
    Since there is already an existing, accepted answer, the best thing to do would be to add some explanation as to how this helps the OP better than the existing one. Just dumping code without explanation doesn't help future visitors. Also `bind` has been deprecated for `on` in most recent versions of jQuery. – Heretic Monkey Oct 16 '16 at 22:55
  • also this will fire two events on a touch device because you'll get touchstart then click immediately after – Ben Gannaway Oct 18 '16 at 16:02
0

Well, in modern jQuery versions, I suppose something like this:

    $(document).on('click','selector', function(e){
        e.preventDefault();
        your code here
    });

...would do the trick for mobile devices...

Hugh
  • 45
  • 1
  • 7