Ajax, prevent multiple request on click

Question

I'm trying to prevent multiple requests when user click on login or register button. This is my code, but it doesn't work. Just the first time works fine, then return false..

$('#do-login').click(function(e) {     e.preventDefault();      if ( $(this).data('requestRunning') ) {         return;     }      $(this).data('requestRunning', true);      $.ajax({         type: "POST",         url: "/php/auth/login.php",         data: $("#login-form").serialize(),         success: function(msg) {             //stuffs         },         complete: function() {             $(this).data('requestRunning', false);         }     });       });  

Any ideas? Thanks!

Answer 1

The problem is here:

    complete: function() {         $(this).data('requestRunning', false);     } 

this no longer points to the button.

$('#do-login').click(function(e) {     var me = $(this);     e.preventDefault();      if ( me.data('requestRunning') ) {         return;     }      me.data('requestRunning', true);      $.ajax({         type: "POST",         url: "/php/auth/login.php",         data: $("#login-form").serialize(),         success: function(msg) {             //stuffs         },         complete: function() {             me.data('requestRunning', false);         }     });       });  

Answer 2

Use on() and off(), that's what they are there for :

$('#do-login').on('click', login);  function login(e) {     e.preventDefault();     var that = $(this);     that.off('click'); // remove handler     $.ajax({         type: "POST",         url: "/php/auth/login.php",         data: $("#login-form").serialize()     }).done(function(msg) {         // do stuff     }).always(function() {         that.on('click', login); // add handler back after ajax     }); });