title: jQuery Button Click in custom Dialog Header
body: <p>I'm creating a full-screen jQuery Dialog.</p>
  
  <p>I'm creating a custom <code>&lt;div&gt;</code> to serve as the Dialog's header.</p>
  
  <p>Inside of the <code>&lt;div&gt;</code> is a <code>&lt;table&gt;</code>. The <code>&lt;table&gt;</code> contains 1 <code>&lt;tr&gt;</code>, which contains 5 <code>&lt;td&gt;</code>s. Inside of each <code>&lt;div&gt;</code> are the actual contents to display in the Dialog's header.</p>
  
  <p>I'm trying to display some jQuery button objects to allow for the user to edit any of the information in the header. I've attached a click event to the button and another click event to the header. Tapping on the button, calls the header's click event, but the button's click event never gets called.</p>
  
  <p>Here's the dialog header click code:</p>
  
  <pre><code>$(dialog)
      .parent()
      .find('.ui-dialog-titlebar').click(
          function () {
              $(dialog).dialog('close').remove();
          }
      );
  </code></pre>
  
  <p>Here's the button creation code:</p>
  
  <pre><code>var editBtn = $('&lt;button&gt;');
  editBtn
      .css('height', '2.2em')
      .css('float', 'right')
      .button(
          {
              text: false,
              icons:
                  {
                      primary: 'ui-icon-pencil'
                  }
          }
      )
      .on(
          'click',
          function () {
              alert('Edit clicked');
              EditClicked(this);
              return false;
          }
      );
  </code></pre>
  
  <p>Any idea how I can fix this?</p>