title: jquery datatables modal form
body: <p>I have a button on a form which has an onclick event handler to open a modal dialog form: </p>
  
  <pre><code>&lt;button id="btnAddNewRow"&gt;Add&lt;/button&gt;
  
  $("#btnAddNewRow").click(function(){
  $( "#mydialog-form" ).dialog( "open" );
  }
  );
  </code></pre>
  
  <p>This adds a row to the current grid and works well.  However, I thought the grid would look better if I had the Add in the grid header as a Div so I moved it like this:</p>
  
  <pre><code>"sDom": '&lt;"H"l&lt;"btnAddNewRow"&gt;r&gt;t&lt;"F"&lt;"clear"&gt;&gt;',
  "iDisplayLength": 25,
  "fnInitComplete": function () {
  $("div.btnAddNewRow").html("&lt;div id='btnAddNewRow' 
      class='tblAction'&gt;&lt;a href='#'&gt;Add&lt;/a&gt;&lt;/div&gt;");
  }
  </code></pre>
  
  <p>The form opens up okay with no errors in the console.  But when I click on "Add" in the header the modal form doesn't open but it does fire the ajax that's attached to the commit button on the modal form.  This then errors because obviously nothing has been entered.</p>
  
  <p>I don't understand why the behaviour of the modal form has changed?</p>
  
  <p>I'm using:</p>
  
  <p>jQuery UI - v1.10.2 - 2013-03-14
  Datatables 1.9.4</p>