Question

How can you empty an element and re-use the elements and keep event handlers etc.?

http://jsfiddle.net/WrMbG/

<div></div>

var inp = $('<input type="text" />')
    .keydown(function(){
        alert('keydown');
    });

$('div').append(inp);
$('div').empty();
$('div').append(inp);

all event handlers and etc. is destroyed when you empty an element.. how can you avoid this?

Answer 1

Use detach on the child instead:

inp.detach();

If you have multiple elements

var saved = $("div").children().detach();

From the documentation on empty:

To avoid memory leaks, jQuery removes other constructs such as data
and event handlers from the child elements before removing the
elements themselves.