title: jQuery ui confirm dialog on multiple forms
body: <p>I have a few forms on the same page and I want to add a confirm dialog to all of them using the same code. They all have a class of confirm-form and the title of the confirm dialog should be generated dynamically (which isn't working atm).</p>
  
  <p>In the html I have the dialog that gets hidden when the page loads, it then gets shown once the <code>dialog('open')</code> function is called.</p>
  
  <p>This is what I have now and it just isn't working at all, the dialog loads but once you press confirm, it repeats the else clause a lot and doesn't submit the form:</p>
  
  <pre><code>var deleteConfirmed = false;
  $('form.confirm-form').submit(function(e) {
  if ( ! deleteConfirmed)
  {
      e.preventDefault();
      var title = $(this).find('input.action').val();
      var $this = $(this);
      console.log('title: ' + title);
  
      $('#confirm-dialog').attr('title', title);
  
      $('#confirm-dialog').dialog({
          buttons : {
              "Confirm" : function() {
                  deleteConfirmed = true;
                  $(this).dialog('close');
                  $this.submit();
              },
              "Cancel" : function() {
                  $(this).dialog('close');
              }
          }
      });
  
      $('#confirm-dialog').dialog('open');
  }
  else
  {
      $(this).submit();
      deleteConfirmed = false;
  }
  });
  </code></pre>