Rails form return false works using .submit() but not .on()
<p>I want to submit a form with ajax, so I'm trying to disable its submission with <code>return false;</code>. When I use</p>

<pre><code>$('#post_form').submit(function() {
</code></pre>

<p><code>return false;</code> works fine. So what's the problem? Well, I don't want to bind to the <code>#post_form</code>. I want to use:</p>

<pre><code>$(document).on('submit', '#post_form', function(e) {
</code></pre>

<p>But <code>return false;</code> doesn't work. <code>e.preventDefault();</code> completely fails too.
What's going on??</p>

<pre><code>&lt;%= f.button( :submit, name: "Post", title: "Post",
              class: 'btn btn-default btn-xs notice_submit', id: 'postbutt'
              ) do %&gt;
  &lt;span class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/span&gt;
&lt;% end %&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$(document).on('submit', '#post_form', function(e) { // return false; doesn't work
// $('#post_form').submit(function() { // return false; works fine
  if ( validatePostForm() ) {
    $.ajax({
      type: 'POST',
      url:  $(this).attr('action'),
      data: $(this).serialize(),
      dataType: 'script'
    });
  }
  e.preventDefault(); // this doesn't do anything
  return false;       // neither does this
});
</code></pre>

<p><strong>EDIT</strong></p>

<p>I've just discovered that removing <code>remote: true</code> from the form gets it working, although I don't understand why:</p>

<pre><code>&lt;%= form_for(:post, url: :posts, method: :post,
                    html: { class: "notice_form", id: "post_form" }
                    # remote: true 
                    ) do |f| %&gt;
</code></pre>