javascript - Prevent multiple clicks on a link using JS or jquery - Stack Overflow

admin管理员组

文章数量:1289845

I have a link which on click opens a modal popup. If the network connection is slow it takes sometime to open the popup. And if the user is super fast, he might click the link multiple times and their are multiple popups ing on the screen. I want to prevent user's multiple click on the link.

I disabled the link on the first click. but the problem is when the popup is closed , it doesnt enable the link again.

How do i prevent these multiple clicks nd make sure that when the popup is not shown, the link is enabled.

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

I have a link which on click opens a modal popup. If the network connection is slow it takes sometime to open the popup. And if the user is super fast, he might click the link multiple times and their are multiple popups ing on the screen. I want to prevent user's multiple click on the link.

I disabled the link on the first click. but the problem is when the popup is closed , it doesnt enable the link again.

How do i prevent these multiple clicks nd make sure that when the popup is not shown, the link is enabled.

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 21, 2016 at 17:09 Aman Gupta asked Apr 21, 2016 at 17:04 Aman GuptaAman Gupta 1,87444 gold badges3333 silver badges5959 bronze badges 3

• 1 Yes sir. right now I am editing the post with my code. – Aman Gupta Commented Apr 21, 2016 at 17:07
• Added relevent code. – Aman Gupta Commented Apr 21, 2016 at 17:12
• Whenever you call $("#popup").hide(); add this: $("#link").removeAttr("disabled"); – stackErr Commented Apr 21, 2016 at 17:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You can use a flag variable to keep track of whether the link has been already clicked or not, and allow click event callback to execute only if is hasn't been clicked before.

var isClicked;   
$('#link').click(function() {
   if(isClicked){
     return false;
   }
   isClicked = true; 
   $("#popup").show();
});

Now you can update isClicked = falsewhere you do $("#popup").hide();

Enable button on close popup action. Like this:

$( "#popup" ).hide( "slow", function() {
    $("#link").removeAttr('disabled');
  });

You'll need to use a callback function, and you can place it one one of two places: Either as an argument passed into show() or in whatever script triggers the modal closing.

For adding it to show change:

$('#link').click(function() {
    $(this).attr("disabled", "disabled");
    $("#popup").show();
});

to

$('#link').click(function() {
    var $temp = $(this);
    $(this).prop("disabled", true);
    $("#popup").show(function(){
         $temp.prop("disabled", false);
    );
});

(See Remove disabled attribute using JQuery? for why you should use prop instead of attr

You could just use a setTimeout. Run the function to disable the button once it is clicked, and call a timeout to re-enable it after some time has passed.

Using setTimeout and 'pointer-events: none' always get the job done for me.

$('#link').click(function(e) {
  $("#popup").show();
  $(e.currentTarget).css({'pointer-events': 'none', 'cursor': 'not-allowed'});
  setTimeout(() => $(e.currentTarget).css({'pointer-events': 'auto', 'cursor': 'pointer'}), 300);
});

本文标签： javascriptPrevent multiple clicks on a link using JS or jqueryStack Overflow