Disable inline onclick event.

Disable inline onclick event.

Hello

I'm trying to find out a perfect solution to enable/disable the inline onclick event on a button or anchor.

For example:

Here is my button
<div class="button" id="rBtn">
<a onclick="ajax()">create</a>
<div>


When user clicks this button, the ajax() function will send an ajax request to server to do something. Before server response, I want the button be disabled (Can't be clicked), once the server response, the button will be enabled and user can click it again. I have tried the solution of using an page variable remember click status of button to implement this function, but I need modify every onclick function of eache button.

So I create following two JS functions, enableButton and disableButton, in my common.js file which I can use in every page.

function enableButton(button){   
   button.removeClass("disabledButton");   
   button.get(0).onclick=button.get(0).onkeypress;
}

function disableButton(button){   
   button.addClass("disabledButton");
   button.get(0).onkeypress=button.get(0).onclick;
   button.get(0).onclick=null;   
}


I use the class disabledButton to control the style of the button. and when I disable the button, I use onkeypress attribute to remember the inline onclick event, and when the button is enabled, I set it back to onclick again.

I'm not sure its a good idea to use in a big project, I really appreciated to your suggestions.

I have do some tests on FF/SAFARI/IE, my jquery is the lastest version.

Thanks very much!
becoder.