Javascript – reinitialize dom events after ajax calls

ajaxdomjavascript

I have the following problem/doubt that I hope somebody could help me with.
Let's say I have several javascript events being initialized when I load a page. In this page I allow the User to click on several action buttons (which have those events). Now, one of these buttons makes in this case an ajax call in which a successful result will make that button disapear and make another button appear (I inject this html from the ajax response). In this moment I want to add as well an event to this new button, so after I inject the html I do so. When I click in this button I want the first button to appear again and this one to disapear. Now this new button (the one that was there in the beggining) has to have again that same event! Do I need to initialize again that event ? Isn't there a way to make that autommaticaly somehow? I mean, if I have several events for all 's of a certain div, and I load with ajax another in that div, shouldn't that respond immediattly to the same events?
Thanks

Best Answer

jQuery has a live event registering facility, that will keep events correct for all current and future matches for a selector. (jQuery.com)

As for plain Javascript, yes, you'll need to register the event again.

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Best Answer

Related Solutions

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

Related Topic

Dynamically create `<input>`s in a form and submit it