title: Click event on dynamic element in dialog
body: <p>I have a jQuery dialog, that's loading a small form when it opens. There is a button in this form <code>&lt;input type="submit" class="cancel" value="" /&gt;</code>. When this is clicked, I'd like the jQuery dialog to close.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>$('#dialog').dialog({
      autoOpen: false,
      modal: true,
      open: function (event, ui) {
          $(this).load("@Url.Action("Create")");
      }
  });
  
  
  $('input.cancel').on('click', function (e) {
      e.preventDefault();
  
      alert("hello");
      //$("#dialog").dialog('close');
  });
  </code></pre>
  
  <p>But clicking on my Cancel button, it just reloads the entire page. Even if I change it to an alert, it still just reloads the entire page.</p>
  
  <p>Am I doing something wrong here? I thought <code>on</code> would attach to a dynamic element, and <code>e.preventDefault()</code> would stop it from submitting the form.</p>