jQuery element reloader

I have looked around for an already existing script for this, but couldn’t find one, so i decided to make my own.

The point of this is to make it easy to reload an element, whether its a form or a link.

To use the script, you add a class to the link/form called “js_container-reloader”. What the script does is it simply gets the content of the action url or href, creates a wrapper around the element you are reloading, takes the ajax response and puts it in to the wrapper, then removes the wrapper.

Its working as it should at the moment, but i wonder if there is a better way of doing this.

//Form element reloader $  (document).on("submit", ".js_container-reloader", function(e){     e.preventDefault();      //Call the reloader function     elementReloader(e.currentTarget); });   //Link element reloader $  (document).on("click", ".js_container-reloader", function(e){     e.preventDefault();      //Call the reloader function     elementReloader(e.currentTarget); });   /*  Element reloader function *   Takes an element and the type of request this is */ function elementReloader(element){      //Set variables     var element = $  (element),         requestUrl,         requestType,         data,         reloadContainer;       //Wrap the element in a reloader div and save the div to a variable     element.wrap("<div class='dv_dis-i js_reload-container'></div>");     reloadContainer = element.closest('.js_reload-container');       //If the element is a form     if(element.is("form")){          //Save the forms action         requestUrl = element.attr('action');          //Save the request type         requestType = element.attr('method');          //Save the forms data         data = element.serialize();       //If the request should be done by GET     }else{          //Get the forms action         requestUrl = element.attr('href');          //Save the request type         requestType = "GET";     }       //Run the ajax script     $  .ajax({         type: requestType,         url: requestUrl,         data: data,         success: function(result){              //If the result returned false, reload the alert container             if(!result){                 reloadAlertContainer();              //If its not false then load the container with the result             }else{                  //Add the result to the wrapper                 reloadContainer.html(result);                  //Remvoe the wrapper                 reloadContainer.find(".js_container-reloader").unwrap();             }         },         error: function(xhr) {              /*  Reload the alerts container             *   An alert is saved to the session if there was an error             *   with any script that was loaded.             *   This function reloads the container which shows the session alert. */             reloadAlertContainer();         },     }); } 

I don’t assume my code is expert level as i am not an expert, but the goal is to make it as easy and dynamic as possible for future implementations. I tried looking in to combining the code, especially the first 2 functions for the event listeners, together in to one function, but couldn’t find a way that seemed like a proper solution.

Just to clarify about the form posting – i do the form validation and checking in php, in the actual file that is being loaded, and not in JavaScript/jQuery. This script is just for reloading elements.