disable anchor tag first click on devices and need to work second click
Question
I have a DOM like this. when i click the anchor tag first time on devices i want to disable the anchor tag. and second click it will go to the url, good answers must be appreciated.
$(function(){ var oreintedWidth = $(window).width(); if (oreintedWidth < 1200) { var $clickLinks = $('.social').find('ul').children('li'); $($clickLinks).on('click', 'a', function(events){ $($clickLinks).each(function(index, element) { $(this).closest('li').removeClass('selected'); }); $(this).closest('li').addClass('selected'); if($(this).closest('li').hasClass('selected')){ events.preventDefault(); }else {} }); } });
<div class="social"> <ul> <li><a href="about.html" target="_blank">one</a></li> <li><a href="about.html" target="_blank">two</a></li> <li><a href="about.html" target="_blank">three</a></li> </ul><!-- /.ul --> </div>
3 answers
solution1
2 2016-09-07 05:39:48
try this, is this what you want.I just added an alert, add your code instead of that. hope this will help to you.
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> a{ text-decoration: none; } </style> <body> <a href="" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a> </body> <script type="text/javascript"> $(document).ready(function(){ var theclick = 0; $(".mylink").click(function(event){ if(theclick == 0) { theclick = theclick + 1; event.preventDefault(); } else { //do your code here alert("Yeh, this is the second time, now I'm working"); } }); }); </script> </html>
copy paste and try it in your browser.
or else, you want to show the disable with css when first click do like this.
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> a.mylink{ text-decoration: none; } .adisable{ color:gray; opacity: 0.7; } </style> <body> <a href="" target="_blank" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a> </body> <script type="text/javascript"> $(document).ready(function(){ var theclick = 0; $(".mylink").click(function(event){ if(theclick == 0) { theclick = theclick +1; $(this).addClass("adisable"); event.preventDefault(); } else { alert("Yeh, this is the second time, no I wil work"); } }); }); </script> </html>
solution2
1 2016-09-07 06:08:17
You can use one() method to track first click and then you can change attribute or class. on other click event you can check attribute or class is set or not? and propogate event based on class or attribute set
$(function(){ var oreintedWidth = $(window).width(); if (oreintedWidth < 1200) { var $clickLinks = $('.social > ul> li > a '); $($clickLinks).one('click', function(e){ e.preventDefault(); $(this).attr('first-clicked','1'); return false; }); $($clickLinks).on('click', function(e){ return $(this).attr('first-clicked')=='1'; }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="social"> <ul> <li><a href="about.html" target="_blank" first-clicked='0'>one</a></li> <li><a href="about.html" target="_blank" first-clicked='0'>two</a></li> <li><a href="about.html" target="_blank" first-clicked='0'>three</a></li> </ul><!-- /.ul --> </div>
solution3
0 ACCPTED 2016-09-07 05:59:55
yes i got it. this is what i am looking for , thanks for the support
$(function(){ var oreintedWidth = $(window).width(); if (oreintedWidth < 1200) { var $clickLinks = $('.social').find('ul').children('li'); $($clickLinks).find('a').attr('onClick','return false'); $($clickLinks).on('click', 'a', function(events){ var nearBy = $(this).closest('li'); $($clickLinks).each(function(index, element) { $(this).removeClass('selected'); $(this).find('a').attr('onClick','return false'); }); nearBy.addClass('selected'); if(nearBy.hasClass('selected')) { $(this).attr('onClick',"return true"); } else { $(this).attr('onClick','return false'); } }); } });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.