when click, mouseleave is triggered?

Question

 window.onload = function() { $(".compartir").hover(function() { console.log('hover'); var self = this; setTimeout($(self).addClass('ready'), 500); }, function() { var self = this; console.log('leave'); setTimeout($(self).removeClass('ready'), 5000); }); $(".compartir a").on('click', function(e) { if (!$(this).parents('.compartir').is('.ready')) { console.log('!ready'); e.preventDefault(); } else { console.log('ready'); } }); }; 

 .compartir { position: relative; height: 40px; } .compartir_box .social, .compartir_box .showSocial { position: absolute; left: 0; top: 0; transition: 0.25s linear all; } .compartir_box .social { opacity: 0; } .compartir_box:hover .showSocial { opacity: 0; } .compartir_box:hover .social { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="compartir_box"> <div class="compartir"> <span class="showSocial">COMPARTIR</span> <div class="social"> <a target="_blank" href="https://www.facebook.com/">facebook</a> <a target="_blank" href="https://www.facebook.com/">twitter</a> </div> </div> </div> 

I want to wait untill the options are visible, because on mobile devices the hover is also a tab, and it launches the link straight away ( without the user knowing which option yet.. ) ( that's why I included the ready class )

The problem is that seems that the ready class is removed at the onclick ( without delay )

Do you know any workaround??

PD: I don't know why but the jquery is not defined in the snippet even that I included jQuery... :s

Answer 1

1. Use an anonymous function to execute in the timeout
2. Save the object to be used later. I prefer to save the jQuery object
3. clear the timeout if needed

 var tId; $(function() { $(".compartir").hover(function() { console.log('hover'); var $self = $(this); clearTimeout(tId); tId=setTimeout(function() { $self.addClass('ready')}, 500); }, function() { var $self = $(this); console.log('leave'); clearTimeout(tId); tId=setTimeout(function() { $self.removeClass('ready')}, 5000); }); $(".compartir a").on('click', function(e) { if (!$(this).parents('.compartir').hasClass('ready')) { console.log('!ready'); e.preventDefault(); } else { console.log('ready'); } }); }); 

 .compartir { position: relative; height: 40px; } .compartir_box .social, .compartir_box .showSocial { position: absolute; left: 0; top: 0; transition: 0.25s linear all; } .compartir_box .social { opacity: 0; } .compartir_box:hover .showSocial { opacity: 0; } .compartir_box:hover .social { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="compartir_box"> <div class="compartir"> <span class="showSocial">COMPARTIR</span> <div class="social"> <a target="_blank" href="https://www.facebook.com/">facebook</a> <a target="_blank" href="https://www.facebook.com/">twitter</a> </div> </div> </div>