CODEWITHSUNDEEP
javascriptjqueryhtml
Jishnu V S
Jishnu V S

Reputation: 8409

disable anchor tag first click on devices and need to work second click

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>

Upvotes: 2

Views: 1589

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8409

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');
    			
    		}
    		
    		
    	});
    }
    });

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

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>

Upvotes: 1

caldera.sac
caldera.sac

Reputation: 5088

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>

Upvotes: 2

Related Questions