Dedicated event handler for close (x) button in jQuery UI Dialog

Question

Is there a way to wire into the close (x) button on a jQuery UI Dialog, such that you can provide a dedicated event handler? Using the "close" or "beforeclose" event does not work because if you have other buttons in your dialog that also cause the dialog to close, you are always going to hit the "close" and "beforeclose" events, which is not desirable. I want a way to run specific code from the close (x) button.

Answer 1

Whenever one event leads to another event inside a jQuery UI widget, the original event is always included in the event object. In this case, you can look at the event object passed to the close callback or the dialogclose event and check if event.originalEvent exists. If it does, then you can assume that the dialog was closed via a click on the close button. This also applies to beforeclose.

If you want to be absolutely sure that it was the close button in the titlebar, then you can check event.originalEvent.target and either check the class or the DOM location using .closest().

Here's a jsbin showing this in action: http://jsbin.com/ajoheWAB/1/edit

Answer 2

You could try:

$(document).on('click','.ui-dialog-titlebar-close',function(){
    //close button clicked
});