'How to dynamically add a parent div (reparent) to a form without losing event handlers

I want to add a parent div to a form dynamically. No code is required, but here it is (simplified), before someone complains:

    <form id="fileupload" style="position:absolute;left:100px;top:100px;"  method="POST" enctype="multipart/form-data">
     <input type="text" name="ram1"  />
     <button type="submit" >Start Submit</button>
    </form>

I want a parent div as in:

   <div ....>
        <form...>
        </form>
   </div>

But in so doing, I do not want event handlers on inner form elements to be lost.

htmljqueryformsjquery-events


Solution 1:[1]

Try this:

$("#fileupload").wrap("<div ..>")

Refer http://api.jquery.com/wrap/ for more options

Working Demo

Solution 2:[2]

if you want to wrap the matched elements into individual div's then use wrap else wrapAll to put all the matched elements into one div

$("#fileupload").wrap( "<div class='new'/>");

Solution 3:[3]

Try it

$("#fileupload").wrap("<div></div>");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Milind Anantwar
Solution 2
Solution 3 Kaptan

Related Questions