Allow to open a link once


I have the following link

<a id="like" class="far fa-thumbs-up fa-lg colorIcono" th:href="${'/respuesta/like/' + + '/' +}"></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() {
         return false; 
asked by Stewie 08.12.2018 в 14:39

2 answers


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 ){
      clicked = true;

<script src=""></script>
<a href="" class="link">Facebook</a>
answered by 08.12.2018 в 14:53

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>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
        <a id="ele" href="" target="_blank">Ir a face</a>
          <div id="aviso"></div>
            let elemento = document.querySelector("#ele")
            conteo = 0
            elemento.addEventListener("click", function(){
              if(conteo > 1){
       = 'none';
                document.querySelector("#aviso").innerHTML = "Limite de clicks alacanzado";


    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 = 'none';

    The user would see something like

    answered by 08.12.2018 в 15:47