jQuery, block multiple clicks on the link

Question

jQuery, block multiple clicks on the link

Navigation

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

1

I'm trying to block multiple clicks. For buttons I got the solution, but for the links I still did not succeed. It has a solution that disables the link, but does not perform the action of the link. I tried using preventDefault, but I'm not sure that it would solve my problem.

Solution for buttons, 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 for 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 for link, disables link but does not execute 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 outside the form tag.

jquery

asked by anonymous 04.05.2016 / 21:50

3 answers

Make Variable with multiple names and a single Value String Paging effect

score 2 · Answer 1

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

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

In the case of a button it can be something like:

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

After you run the event, you enable it again.

score 2 · Answer 2

You need to implement return false in your click event

$(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><ahref='<s:urlaction="Pedido!edit"><s:param name="id" value="id"/></s:url>'><strong>Editar</strong></a>

score 1 · Answer 3

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

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