35494

.submit doesn't work if the bind object was refreshed by ajax

Question:

I <a href="http://www.makeuseof.com/tag/ajaxify-wordpress-comments/" rel="nofollow">AJAXified commenting system</a> so when Post Comment button is clicked ajax call is made instead of the original form submission. It works fine till I refresh the page with the comment submit button by ajax. Let's say that I only refresh the div that contains the post and comments and the button. After that the ajax is not triggered rather the original way of submitting is used.

The javascript to submit the form looks like

jQuery('document').ready(function($){ var commentform=$('#commentform'); // find the comment form commentform.submit(function(){ // $('#commentform').submit(function(){

I tried to use $('#commentform') instead of the variable which didn't help.

I tried to assign the commentform variable again after the successful ajax that loads new post. That didn't help either.

Part of the javascript that loads post via ajax

var $ = jQuery.noConflict(); $(document).ready(function() { $(".mhomepage_item").bind("click", function(){ //bind a click event on a class with name = mhomepage_item $.ajax({ type: "POST", url: mhomepage.ajax_url, data: { action: "get_post", type: $(this).attr('type'), current_post_id: $('#post_container').attr('current_post_id') }, success: function(response) { response_from_json = JSON.parse(response); $('#content_container').html(response_from_json['html']); commentform=$('#commentform'); } }); // } });

Could someone suggest how to make the bind to form submit button permanent even after the button is reloaded via ajax?

Answer1:

Try event delegate:

$(document).on("submit","#commentform",function(){ // action to perform after submit intent });

By using delegated event handler, you can handle dynamically created elements easily without having to do something like rebinding event handler.

You could also bind the event to the body or the closest container <strong><em>that's available when you call the function</em></strong> to avoid bubbling more levels to document. You could also try this in your case:

jQuery(document).ready(function($){ $('#content_container').on("submit","#commentform",function(){ // action to perform after submit intent }); });

<a href="http://api.jquery.com/on/" rel="nofollow">Documentation</a>

Answer2:

Accordingly with: <a href="https://stackoverflow.com/questions/4842119/jquery-binding-click-to-a-link-after-ajax-call" rel="nofollow">jQuery binding click to a link after AJAX call</a>

You must bind a button to click/submit event in success callback.

you can to do:

success: function(response) { response_from_json = JSON.parse(response); $('#content_container').html(response_from_json['html']); commentform=$('#commentform'); $('#commentform').bind("submit", function() { ... } ); }

Recommend

  • Django DetailView with form for comments
  • submitHandler is not triggered although it is valid
  • Multiplying Form Template with Jquery
  • global name 'request' is not defined: overriding form_valid
  • Django 1.11 on passenger_wsgi not routing POST request
  • Using PDO in PHP [closed]
  • javascript included files are gone after AJAX reload
  • On form submit, mailto from javascript with form values
  • checking returned data from PHP script through jquery
  • get click coordinates from via javascript
  • iTunes Connect yellow warning icon
  • How can I find shortened URLs that link to a specific long URL?
  • Validate field and throw exception in JSF, but attach error message to another field?
  • multiple custom error message support per field by using parsley.js
  • How to make nicEditor snaplet? (Several questions)
  • Mocha throws unexpected token error for ES6 object spread operator
  • Criterion causing memory consumption to explode, no CAFs in sight
  • Upload file that is in the cpan database
  • Assign variable to the value in HTML
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Redux, normalised entities and lodash merge
  • Weird JavaScript statement, what does it mean?
  • How do you troubleshoot character encoding problems?
  • How to format a variable of double type
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Authorize attributes not working in MVC 4
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • EntityFramework adding new object to nested object collection
  • Is there any way to bind data to data.frame by some index?
  • Binding checkboxes to object values in AngularJs
  • How can i traverse a binary tree from right to left in java?
  • How to Embed XSL into XML
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?