Trying to understand how to hook into Ajax global events

Trying to understand how to hook into Ajax global events

Hello.
I am trying to subscribe to the global Ajax error handling and display
a custom dialog if there's an ajax error in the page.
Right now, this is my code:
$('#ajax-error').ajaxError(function(event, request, settings){
                                             $(this).dialog('open');
                                         });
It obviously lays into the document.ready section but the dialog is
displayed on page load instead of being triggered upon an error.
Markup for the dialog is pretty simple:
<div id="ajax-error" class="ui-widget ui-state-error">
        <h3 class="ui-widget-header"> Errore </h3>
        <p class="ui-widget-content">
L'esecuzione della richiesta non è andata a buon
fine!

</div>
My main problem(I will solve the "visual" issues in the UI list) is
that the dialog is called when the page loads instead of the right
time. Plus, when I press the ajax button, it doesn't show but this may
have to do with rebinding(I've skimmed through several sites which
were talking about this issue). I will however solve the latter next,
first thing to me is to show the dialog when it's needed - i.e. upon
ajaxError event triggered.
What am I doing wrong? Can you please point me in the right direction?
Thank you so much for reading this,
Andrew
--