title: When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database
body: <p>I've been trying different options for over a week now and nothing seems to work. What makes this slightly more complicated is that I have multiple forms on the page that all need to be tied to this same submit function. They all have different IDs.</p>
  
  <p>The following is a simplified version of my jQuery:</p>
  
  <pre><code>$('form').on('submit', function(form){
      var data = $(this).serialize();
      $.ajax({
          type:       'POST',
          cache:      false,
          url:        'inc/process.php',
          data:       data,
          success:    function(){
                          // The following fires on first AND second submit
                          console.log("Updates have successfully been ajaxed");
          }
      });
      return false;
  });
  </code></pre>
  
  <p>I have also tried using <code>$('form').submit()</code> with the same results.</p>
  
  <p>Relevant sections of process.php:</p>
  
  <pre><code>$query =    'UPDATE     pop_contents
              SET     ';
  $id = $_POST['content_id'];
  /* to avoid including in MySQL query later */
  unset($_POST['content_id']);
  
  $length = count($_POST);
  $count = 0;
  foreach($_POST as $col =&gt; $value){
      $value = trim($value);
      $query .= $col."='".escapeString($value);
      // don't add comma after last value to update
      if(++$count != $length){ $query .= "', "; }
      // add space before WHERE clause
      else{ $query .= "'  "; }
  }
  $query .= 'WHERE        id='.$id;
  
  $update_result = $mysqli-&gt;query($query);
  </code></pre>