 <p><em>Update:</em></p> <p>The original answer (below) still applies, but given that the form is actually loaded using AJAX, you can't bind the event listeners in the <code>$(document).ready</code> callback. The best option for you is to use event delegation. This is done by attaching an event listener to a DOM element that <em>does</em> exist from the start, but have that listener pick up on events for elements that might be added later on. For example: the body element will always exist, so you can listen for a form submission there, whether or not that form exists doesn't matter:</p> <pre><code>$('body').on('submit', '#form-id', function(e) { console.log('#form-id was submitted, do AJAX =&gt; submission stopped'); return false; //or e.preventDefault(); e.stopPropagation(); }); </code></pre> <p>The why and how this works is very well explained <a href="http://www.quirksmode.org/js/events_order.html" rel="nofollow">here</a>. It boils down to the fact that all events pass through all of the parent DOM elements of the target node, so you can attach listeners anywhere in the DOM, and handle the events before they reach their target.<br> I think <a href="http://stackoverflow.com/a/17352923/1230836">this old answer of mine</a> might explain a thing or 2, too. It doesn't use jQ, but it contains a simplified version of the code that jQ uses internally for delegation.</p> <hr> <p>You're preventing the default effects of the click event on <code>$('#edit-comment')</code>, but that event still propagates through to the form. You might want to add <code>e.stopPropagation()</code>, too. Or simply <code>return false;</code> from the callback (which prevents the default <em>and</em> stops propagation).</p> <p>However, a better way to prevent the form from being submitted is to use the <code>submit</code> event, and stop the submission there:</p> <pre><code>$('#form-id').on('submit', function(e) { console.log('Do ajax call here'); return false; //or e.preventDefault(); e.stopPropagation(); }); </code></pre>