Question

As piece of code is better than thousand word

// this is our dynamic created element.,
var $test = $('<button>If you add this event is working, if you remove this, and add again, event is not working...</button>');

// this is our event
$test.click(function(){
    alert('Fooobar'); // fires only first time
});
// $test.on('click',function(){ <-- same behaviour

$('#add').click(function(){
    $('#container').append( $test );
});
$('#remove').click(function(){
    $('#container').html(''); // This is destroying all $test events!!!
});

How can i remove element, append it again and save events?

JS Fiddle:

• http://jsfiddle.net/gPWxd/4/

I would like to remove element without destroying events.

Answer 1

I think you are looking for jQuery’s detach method.

The .detach() method is the same as .remove(), except that .detach()
keeps all jQuery data associated with the removed elements. This
method is useful when removed elements are to be reinserted into the
DOM at a later time.

You could detach $test before the $('#container').html(''); code so $test could be reinserted with all events still attached.