隐藏ajax上的点击输入

I have a button added by third part module. When click on this button, the third module sends an ajax request (I can't change the third party code). How can I hide this button on ajaxStart and show it on ajaxStop?

I tried:

$('#buttonId').click(function() {
    $(this).ajaxStart(function() { $(this).hide(); }).ajaxStop(function() { $(this).show(); });
});

But it doesn't work right.

See fiddle: http://jsfiddle.net/4YJyk/2/

$('#buttonId').click(function() {
    $(this).ajaxStart(function() { $("#buttonId").hide(); }).ajaxStop(function() { $("#buttonId").show(); });
});

Edited

the problem is the usage of this for anonymous function in that function this related to function not the click event so you can use this approach,

$('#buttonId').click(function() {
    var button = $(this);
    button.ajaxStart(function() { button.hide(); }).ajaxStop(function() { button.show(); });
});

EDIT: After your comment I check the ajaxStart I thought it is some plugin of yours but it s a global event so you cannot attach that guy to a button you can only attach it to document and when a AJAX request starts or ends the related event triggered. Please see here. http://api.jquery.com/ajaxStart/ When you attach that event to a object you can access it with this but it never cause the trigger the event. So you can do something like this.

$(document).ajaxStart(function() {
  $( "#buttonId" ).hide();
});

$(document).ajaxStop(function() {
  $( "#buttonId" ).show();
});

To trigger this event you have to make an AJAX request like;

$( "#buttonId" ).click(function () { $("#divId").load("DivContent.aspx") });

Hope it helps.

I found simple solution, thanks for help:

var tmp = false;

$('.button').click(function() {
    $(this).hide();
    tmp = $(this);
});

$(document).ajaxStop(function() {
    if (tmp) {
         tmp.show();
         tmp = false;
    }
});