.load() looses the hierarchy of loaded html elements
<p>I have almost solved my task to partial load a html with jquery (1.8.0).</p>

<p>This is the html I would receive from my server:</p>

<pre><code>&lt;form id="save-form" action="/sales_item/edit/9/" method="post"&gt;
  &lt;p&gt;
     &lt;label for="id_item_description"&gt;Item Description:&lt;/label&gt;
     &lt;input id="id_item_description" type="text" maxlength="40" value="test2y" name="item_description"&gt;
  &lt;/p&gt;
  &lt;input type="submit" value="save"&gt;
&lt;/form&gt;
</code></pre>

<p>However when I load the above with the following jquery in my <code>&lt;tr&gt;</code> element...</p>

<pre><code>function row_edit() {
    // e.g. url = '/sales_item/edit/8' 
    var url = $(this).attr("href") + "/";

    //e.g. get whole row to be replaced with editing fields
    var row = $(this).closest('tr')

    row.load(
        url,        
        function () {
            $("#save-form").submit(url, row_save);
        }
    );
    return false;
}
</code></pre>

<p>, the hierarchy is completely lost, see how form tag is closed before the content.</p>

<pre><code>&lt;tr&gt;
   &lt;form id="save-form" action="/sales_item/edit/9/" method="post"&gt;&lt;/form&gt;      
   &lt;p&gt;
     &lt;label for="id_item_description"&gt;Item Description:&lt;/label&gt;
     &lt;input id="id_item_description" type="text" maxlength="40" value="test2y" name="item_description"&gt;
   &lt;/p&gt;
   &lt;input type="submit" value="save"&gt;
&lt;/tr&gt;
</code></pre>

<p>Any idea what I am doing wrong in my load?</p>
