jQuery dynamic elements - how to remove element and save event data?

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.

jimp · Accepted Answer · 2012-09-16 17:11:59Z

3

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.

answered Sep 16, 2012 at 17:11

jimp

17.6k3 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

var $test = $('<button>If you add this event is working, if you remove this, and add again, event is not working...</button>');
              
// here you've to use delegate event
// using jQuery on() method

$('#container').on('click', $test, function(){
    alert('Fooobar');
});

$('#add').click(function(){
    $('#container').append( $test );
});
$('#remove').click(function(){
    $('#container').html('');
});

Demo

For delegate event (aka live event) handling you need to use on() like:

$(Parent).on(eventName, target, handler);

Here Parent is a static-element that is a container to target and target is the element to which the event will bind.

You can also do following

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

$('#add').click(function() {
    $('#container').append($test.on('click', function() {
        alert('Fooobar');
    }));
});
$('#remove').click(function() {
    $('#container').html('');
});

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 16, 2012 at 17:04

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

2 Comments

Peter Over a year ago

That's it! But what if I need to put $test somewhere else than #conatiner?

thecodeparadox Over a year ago

@EXQStudio as you $test contains only <button> so it firing the click event to all buttons. you can use any class name to distinguish the dynamically added button.

Ohgodwhy · Accepted Answer · 2012-09-16 17:02:12Z

-2

Bind the event's function to a parent element.

$('body').on('click', 'button', function(){
    alert('Delegated Click function');
});

Replace button with your selector.

answered Sep 16, 2012 at 17:02

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

2 Comments

Peter Over a year ago

I know this trick, but this doesn't work for me. Thanks anyway. I would like to remove element without destroying events.

Ohgodwhy Over a year ago

@EXQ Studio -- There's no way to remove an element from the DOM (cleanly) and save it's events. This is why we delegate functionality. Choosing to go against the grain will cause unnecessary overhead, and also brings challenges (such as this) to the plate. I don't think you're going to find repreive.

Collectives™ on Stack Overflow

jQuery dynamic elements - how to remove element and save event data?

3 Answers 3

Comments

You can also do following

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

You can also do following

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related