Allow to open a link once

Question

Allow to open a link once

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have the following link

<a id="like" class="far fa-thumbs-up fa-lg colorIcono" th:href="${'/respuesta/like/' + respuesta.respuestaSuya.id + '/' + respuesta.id}"></a>

And what I want is to be able to execute it once, that is to say, when it is a second time, it does not go anywhere.

I've tried the following but I know it's never going to open because I do not put any conditions on it, and I do not know what kind of condition to put.

$('#like').click(function() {
         alert("NO");
         return false; 
 });

javascript jquery

asked by Stewie 08.12.2018 в 14:39

source

2 answers

Call a Modal Window from a partial view How to Delete Time From A Datatime In Query LINQ In C #?

score 1 · Answer 1

You can put a flag and prevent the native functionality of the element. I leave you a documented code.

//On ready
$( ()=>{
   
  //Preparamos una bandera
  var clicked = false;
  //Detectamos click, pasamos el evento
  $(document).on('click','.link',function( e ){
    //Validamos si ya se hizo click y prevenimos la funcionalidad por default del elemento
    if( clicked ){
      e.preventDefault();
      
    }else{
      clicked = true;
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://www.facebook.com/" class="link">Facebook</a>

score 1 · Answer 2

It occurs to me that you do it as follows

You get by means of your id the link that has the functionality of redigiria another web

You declare a variable conteo that will be used to verify the number of clicks

by means of a handler you verify the event clik of the HTML element that you just read

inside the function that is triggered in the handler you make an increase of 1 to the variable conteo in this way conteo++ to verify how many clicks have been given

If the number of clicks is greater than 1 then we make the link to be disabled and not to confuse the user, by means of innerHTML I modify a div in which I notice that it has given more than one click

CODE

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <a id="ele" href="https://www.facebook.com" target="_blank">Ir a face</a>
      <div id="aviso"></div>
    <script>
        let elemento = document.querySelector("#ele")
        
        conteo = 0
        elemento.addEventListener("click", function(){
          conteo++
          if(conteo > 1){
            console.log(conteo)
          }else{
            elemento.style.pointerEvents = 'none';
            document.querySelector("#aviso").innerHTML = "Limite de clicks alacanzado";
          }
          
        })
    </script>
    </body>
    </html>

UPDATE

You can try to improve the user experience by placing an instruction that removes the underscore of the link so that not only the click limit message appears but the link is disabled and that aspect is removed by removing that feature

elemento.style.textDecoration = 'none';

The user would see something like