Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery onClick not working on Iphones but working on androids

So I have this code:

$(".left-nav-icon").on("click touchstart", function () {
  $(".nav_aside").toggleClass("show");
});

It’s meant to display a sidebar when I click on a .left-nav-icon. It works perfectly on android but for some reason, just doesn’t work on ios. I’ve tried everything, this was the last code I tried and it still didn’t work.
I’ll appreciate any help, thanks.

Tags:

2

Answers


  1. 0

    Try writing your code like this instead. Updated code:

     $(".left-nav-icon").click(function() {
     $(".nav_aside").toggleClass("show");
  });
    .nav_aside{
    display: none;
  }
  
  .nav_aside.show{
    display: block;
  }
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
   
   <div id="container">
        <h1 class="left-nav-icon">Menu</h1> 
         <h1 class="nav_aside">Sidebar</h1> 
        <h1 class="nav_asides">Content</h1> 
     </div>
    Login or Signup to reply.
  2. 0

    Unfortunately, I don’t have an iPhone and can’t test my answer, but I guess it works.
    Before I try to present my solution, let me say one thing, .on('click' is usually used for live element. If your element is not live, it is better to use this.

    $(".left-nav-icon").click(function() {
    $(".nav_aside").toggleClass("show");
});

    But my solution is:

    1- make sure there is no element on .left-nav-icon. It may be, for example, a part of a div on the .left-nav-icon element (in iphone). This way your click on the .left-nav-icon will not be applied. this code can help you

    document.addEventListener('click',function(e){
    console.log(e.target)
})

    2- It is better to use raw JavaScript, this code is equivalent to your code:

    document.querySelectorAll('.left-nav-icon').forEach(elm=>{
    elm.addEventListener('click',function(){
        this.classList.contains('show')?
            this.classList.remove('show'):
            this.classList.add('show')
    })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search