title: Bootstrap modal form submitting multiple times after first submit
body: <p>I have a modal form - bootstrap css - which with every button click submits an additional time, e.g.  </p>
  
  <ol>
  <li>first click, 1 submit</li>
  <li>second click, 2 submits</li>
  <li>third click, 3 submits</li>
  <li>etc, etc  </li>
  </ol>
  
  <p>The jQuery I use is below. The modal is called from another modal (dynamically created) thus I need to use the $(document) calling method. I've tried the $(document).on( 'submit', '#pos_form', function(e) { ... }); too with an e.preventDefault(), but that didn't make any difference, nor did '$('#posModal').remove('#pos_form');'.</p>
  
  <pre><code>/* Calling page */  
      $(document).ready(function() {
          $('.posbutton').on('click', function(e) {
              var id = '#'+this.id;
               openSpinner();
              $.ajax({
                  url: 'ajax_pos_form.php',
                   type: 'post',
                  dataType: 'html',
                  data: { GRIDCO: $(id).data('gridco'), project $(id).data('project'), gridconame: $(id).data('name') }
              })
              .done(function( response ) {
                  if ( response) {
                      $('#posModal').html('');
                      $('#posModal').append(response);
                      $('#posModal').modal('show');
                  }
                  closeSpinner();
              });
          });
      });
  
  /* page with modal form */
      $(document).ready(function() {
          $(document).on( 'click', '#submit', function(e){
               $.ajax({
                  url: 'ajax_pos_form.php'
                  , type: 'post'
                  , dataType: 'json'
                  , data: $('#pos_form').serialize()
                  , success: function(response) {
  
                      if ( response.success ) {
                          $('#posModal').modal('hide');
                          return false;
                      }
                      else {
                          alert ( response.msg );
                          return false;
                      }
                      $('#posModal').remove('#pos_form');
                      $('#posModal').modal('hide');
                      return false;
                  }
              });
              return false;
           });
      });
  </code></pre>
  
  <p>In my testpage, not called from a modal, it doesn't work either. Any help would be appreciated</p>