Recursively replaced element with editor (and back) breaks event listeners
<p>Background: There are some values on my website which shall be editable via JavaScript and Ajax. The Ajax is working fine and I can edit values but after I saved the value I cannot edit it again without reloading the page.</p>

<p>I reduced the problem to this: The original element gets replaced with a HTML form. When the form is submitted the form itself is replaced by the new version of the display element, but the event listener is broken.</p>

<p>I put together some sample JS code (<a href="http://jsfiddle.net/J8Sa7/" rel="nofollow">JSfiddle</a>) which doesn't work as I expect.</p>

<pre><code>var text = $('&lt;em/&gt;').text('click me!');

text.click(function() {
    var button = $('&lt;input type="button" value="Click me, too" /&gt;');

    button.click(function() {
        $('#container').html(text);
    });

    $('#container').html(button);
})

$('#container').html(text);
</code></pre>

<p>What shall happen:</p>

<ol>
<li>current value displayed</li>
<li>after text <code>click</code>ed text replaced with form (text element saved for simplicity)</li>
<li>after button <code>click</code> text displayed again</li>
<li><code>click</code> on text works again as in step 2 (doesn't work now)</li>
</ol>

<p>Why is the <code>click</code> event lost when using the <code>text</code> object again?</p>
