Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The problem is, when the <code>success</code> function is called, then you call <code>bindPostCommentHandler</code> (again), which binds the anonymous function <strong>again</strong> to all form objects. I.e. after one submission, every form has two functions bound to the submit event, after two submission, three and so on.</p> <p>So you have to change the <code>success</code> part of the Ajax function to only add the handler to the form contained in the response.</p> <p>Maybe like this (I don't know if this works, I am not that good in Javascript/jQuery):</p> <p><strong>Edit:</strong></p> <p>You mentioned the first one is working. Then the code is probably not working because, the DOM gets replaced. See my updated code (use <code>html</code>instead of <code>replace</code>).</p> <p><strong>Edit 2:</strong></p> <p>What about changing your HTML structure. Just wrap another <code>div</code> around the comments and the form and replace the contents of this. This should definitely work. Something like</p> <pre><code>&lt;div class="new_around_comments"&gt; &lt;div class="comments"&gt;&lt;/div&gt; &lt;div class="commentFormWrapper"&gt; &lt;!-- Form --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Then you have to call two times <code>parent()</code>:</p> <pre><code>function bindPostCommentHandler(parent) { parent.find('form').submit(function() { var current = $(this); $.ajax({ //... success: function(html, textStatus) { // Edit 2 parent = current.parent().parent() parent.html(html); bindPostCommentHandler(parent); }, //... }); return false; }); } $(document).ready(function() { var parent = $('.commentFormWrapper') bindPostCommentHandler(parent); }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload