绑定解除绑定 onclick 事件不适用于 Ajax

Question

I am having an issue with bind & unbind onClick listener using JQuery Ajax.

How to unbind on click event that it can't be clicked multiple times, but bind it if ajax fails. this is what I have tried so far.

$('#test').on('click', function (e) {  
 e.preventDefault();
 alert('clicked');
 $( "#test" ).off( "click");// works fine,remove on click listner
 // Ajax function
 // done()  // Do nothing.
 // error() // bind it again so it can be clicked.
});

https://jsfiddle.net/khirad1996/4nLdvq9s/2/

Answer 1

You can disable the button while the call is happening, and re-enable if there is an error!

 const fakeAjax = time => new Promise(r => setTimeout(() => r(Math.random() >.5), time)) const button = document.querySelector('button'); button.addEventListener('click', async function() { this.disabled = true; error = await fakeAjax(1000); this.disabled = error; });

 <button>Ajax Call</button>