Delete item on the second click on mobile devices (jQuery)

Question

I have a UL with a hover effect on its LIs. When hovering there is a red div appears on the left and when you click on the LI it toggles a class to the text inside of it. It's all ok on the desktop version but when I switch to the mobile version the first tap should activate only the hover effect. Instead of that it acticates the hover and toggle a class immediately. I want to have on mobile version the first tap activates hover and then if it's still active next taps toggle the class. Pls try the code on mobile version it's all clear there what I mean. Thanks

 $('ul').on('click', 'li', function () { $(this).toggleClass('completed'); }); $('ul').on('click', 'div', function (event) { $(this).parent().fadeOut(250, function () { $(this).remove(); }); //prevent event bubbling event.stopPropagation(); }); 

 .container { width: 360px; margin: 0 auto; border: 1px solid black; } ul{ list-style: none; padding:0; margin:0; } li{ width: 100%; border: 1px solid black; display: flex; } li div{ background-color:red; width:0; transition: 0.1s linear; display:inline-block; } li:hover div{ width: 40px; } .completed { color: grey; text-decoration: line-through; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1>Groceries</h1> <ul> <li><div></div><p>carrot</p></li> <li><div></div><p>onion</p></li> <li><div></div><p>tomato</p></li> </ul> 

Update: I'm almost got it, got the first toggle on the second tap, the problem is the next toggle occurs on the double tap too:

var isMobile = false;
var isClicked = 0;

$('ul').on('click', 'li', function () {

   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
       Mini/i.test(navigator.userAgent) ) {
          isMobile = true;
          isClicked++;
   }

   if(!isMobile || isClicked > 1){
          $(this).toggleClass('completed');
          isClicked = 0;
   }
});

Answer 1

You should use touchstart event to handle touch event on mobile but don't forget to check if ontouchstart is available.

 $('ul').on('click', 'li', function() { if ('ontouchstart' in document.documentElement) { if ($(this).hasClass('hover')) { $(this).toggleClass('completed'); } } else { $(this).toggleClass('completed'); } }); $('ul').on('touchstart', 'li', function(e) { var link = $(this); //preselect the link if (link.hasClass('hover')) { return true; } else { link.addClass("hover"); $('li').not(this).removeClass("hover"); e.preventDefault(); return false; //extra, and to make sure the function has consistent return points } }); $('ul').on('click', 'div', function(event) { $(this).parent().fadeOut(250, function() { $(this).remove(); }); //prevent event bubbling event.stopPropagation(); }); 

 .container { width: 360px; margin: 0 auto; border: 1px solid black; } ul { list-style: none; padding: 0; margin: 0; } li { width: 100%; border: 1px solid black; display: flex; } li div { background-color: red; width: 0; transition: 0.1s linear; display: inline-block; } li:hover div, li.hover div{ width: 40px; } .completed { color: grey; text-decoration: line-through; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1>Groceries</h1> <ul> <li> <div></div> <p>carrot</p> </li> <li> <div></div> <p>onion</p> </li> <li> <div></div> <p>tomato</p> </li> </ul> </div> 

Answer 2

First of all disable hover with CSS using @media queries for mobile devices.

Second create a jquery method for tap/click on that

at which you want to show red div. you can do something like this

 $('li').on('click' , function(){ if($(window).width() <= 760){ // Enter maximum width of mobile device here for which you want to perform this action // show red div here } return false; }); 

Also keep in mind @media and $(window).width() should have same pixels/size

EDIT:

try replacing this

 var isMobile = false; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { isMobile = true; } $('ul').on('click', 'li', function () { if(isMobile){ $(this).toggleClass('completed'); } }); 

And let the other code in the click function and try again