jQuery, block multiple clicks on link

Asked

Viewed 2,577 times

1

I am trying to block multiple clicks. For buttons I got the solution, but for links I have not yet succeeded. Has a solution that disables the link, but does not execute the link action. I tried to use preventDefault, but I’m not sure it would solve my problem.

Button solution, works perfectly.

        jQuery.fn.preventDoubleSubmit = function() {
          jQuery(this).submit(function() {
            console.log('preventDoubleSubmit..1');
            //alert('preventDoubleSubmit..1');
            if (this.beenSubmitted) {
              console.log('preventDoubleSubmit..2');
              //alert('preventDoubleSubmit..2');
              return false;
            } else {
              console.log('preventDoubleSubmit..3');
              //alert('preventDoubleSubmit..3');
              this.beenSubmitted = true;
            }
          });
        };

        jQuery('form').preventDoubleSubmit();

Solution 1 to link, nothing happens when clicking.

            $("a").click(function (e) { 
                console.log('Cliquei no link..1');
                e.preventDefault();
                var target = jQuery(this);
                console.log("You clicked!", target.length);
                target.trigger("click");
                console.log('Cliquei no link..2');
            });

Solution 2 to link, disables the link but does not perform the action

            $("a").click(function () { 
                console.log('Vou desabilitar');
                $(this).fadeTo("fast", .5).removeAttr("href"); 
                return true;
            });

HTML

<a  href='<s:url action="Pedido!edit"><s:param name="id" value="id"/></s:url>'><strong>Editar</strong></a>

Just one more detail, the links are out of the form tag.

jquery

  • In solution 2 you could take the href attribute of the element and use localtion.href to open the link after removing the attribute.

  • Matheus, could you give me an example of what the code would look like? I think it would be a good solution. Thanks.

  • Would that be the command to open the link ? window.Location = $(this). attr('href');

  • When you say "multiple clicks" dblclick, or is the usual fast double click?

  • Impatient users click the first time, after a few seconds with no response, click again. Then it would be block from the second click.

3 answers

2

In case link you can use the following to disable the click:

$(this).css('pointer-events', 'none');

In case of button can be something like:

$(this).prop("disabled", true );

After you run the event, you enable again.

  • Leo, it worked. Since the link redirects to another page, I don’t have to worry about enabling it again. Thanks.

  • @Developer if it’s just a click, you can also use the colleague’s solution Wallace Maxters.

  • Yes, the solution is good. But my list of links is created dynamically (I included the image with the list in the question), I would have to assign this method to all links of the page.

2

You need to implement a return false in his event of click

$(document).ready(function(){
  var count = 0;
	$("a").click(function (evt) { 
    count++;
    if ( count > 1) {
      // Desabilita cursor
    	$(this).css('pointer-events', 'none');
  		return false;
	}
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a  href='<s:url action="Pedido!edit"><s:param name="id" value="id"/></s:url>'><strong>Editar</strong></a>

  • Gabriel, the accountant’s idea was really good. Regardless of the link I click, the counter will always be incremented and after the first click the others will be disabled by if. Thanks.

  • 1

    Gabriel, the code worked perfectly. But I would like to disable all links after the first click. When I created Else to disable all "$('a'). css('Pointer-Events', 'None');", the link action is not running. Can I get this help? I don’t have jQuery domain and javascript, my doubt may be basic.

  • To disable all buttons you can change the selector reference $(this), on line 7, for the desired $("a")

  • Ok, I changed. But click action is not taking place, redirect to another page.

1

In jQuery we have a solution ready if you want one click per link, just use the method one.

$('#target').one('click', function (e)
{ 
      e.preventDefault();
      $(location).attr({href: this.href});
});

  • Wallace, could you apply this method to all the links to the page? Thank you.

  • Yes, the links have class?

  • No, but I can create and associate.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.