title: How can I detect that the (X) close button of a jQuery UI Dialog was clicked, separately from the dialogclose/dialogbeforeclose events?
body: <p>I'd like to be able to detect the (x) close button of a jQuery UI Dialogue being clicked, but I don't want to use the <code>dialogclose</code> / <code>dialogbeforeclose</code> events (since I believe these will fire regardless of how the dialog was closed).</p>
  
  <p>I tried <code>$(".ui-dialog-titlebar-close").live("click")</code>, but that doesn't seem to work.</p>
  
  <p>How can I do this?</p>
  
  <p>Sample code: (the debugger doesn't fire up when the dialogue is closed).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
    $(document).ready(function() {
      $("#dialog").dialog();
  
      $(".ui-dialog-titlebar-close").live("click", function() { 
          debugger; // ** clicking the close button doesn't get to here.**
          });
    });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;div id="dialog" title="Dialog Title"&gt;I'm in a dialog&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>