javascript - jQuery 动态元素 - 如何删除元素并保存事件数据？

Question

因为一段代码胜过千字

// 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!!!
});

如何删除元素，再次附加并保存事件？

JS小提琴：

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

我想删除元素而不破坏事件。

Answer 1

我认为您正在寻找jQuery 的分离方法。

.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据。当移除的元素稍后要重新插入到 DOM 中时，此方法很有用。

您可以在代码$test之前分离，因此可以重新插入仍然附加的所有事件。$('#container').html('');$test

Answer 2

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('');
});

演示

对于委托事件（又名实时事件）处理，您需要使用on()如下：

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

这Parent是一个静态元素，它是一个容器，target也是将要绑定target的元素。event

阅读更多关于 jQuery on()方法的信息。

---

您还可以执行以下操作

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('');
});

演示

Answer 3

将事件的函数绑定到父元素。

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

替换button为您的选择器。