关于事件的疑惑,请看代码.

Question

var $buttom=[];
        
//动态添加按钮
function addBtn() {
    var $dom = $('<button> 动态按钮' + i++ + '</button>');
    $dom.on('click',function(){
        console.log($(this).html());
    });
    $buttom.push($dom);
    $.each($buttom,function(i,n){
        $('#test1').append(n);
    });
};
//移除
function del(){
    $('#test1').empty();
};
//恢复按钮
function recov(){
    $.each($buttom,function(i,n){
        $('#test1').append(n);
    });
};
//恢复按钮2
function resetEve(){
    $.each($buttom,function(i,n){
        n.on('click',function(){
            console.log($(this).html());
        });
    });
 
    del();

    $.each($buttom,function(i,n){
        $('#test1').append(n);
    });
};
        
//操作方式1:
//问题:先添加按钮,点击事件可以输出控制台log,移除后恢复,事件就没有了.
addBtn();
del();
recov();
        
//操作方式2:
//问题:先添加按钮,点击事件可以输出控制台log,del()删除后,用resetEve()方法添加,注意看里面内容,
//里面是重新绑定事件后,还调用了一次del().为什么然后在append到界面,为什么这个时候事件又可以响应.
addBtn();
del();
resetEve();
        
//操作方式3:
//问题:先添加按钮,点击事件可以输出控制台log,不执行删除,直接用resetEve()方法添加,注意看里面内容,
//里面是重新绑定事件后,还调用了一次del().为什么然后在append到界面,为什么这个时候事件又可以响应.
addBtn();
//del();
resetEve();

问题: 用变量保存的$dom,通过$dom绑定的事件会随着empty()失去作用;

1. 为什么通过$dom变量绑定的事件, 事件会丢失,这个变量命名还在,常规的理解中,它的事件也应该还在,为什么就丢失了?
2. 为什么我通过操作方式2的方式,通过数组储存这个$dom变量,又可以呢?这里面的数组明明就是指针,指向的就是$dom的变量.中间的差别我想不到.但应该一定是有地方不一样,到底哪不一样?

对于事件,一定是有什么我理解错了的地方.或者是依赖的地方,希望高手指条明路.

Answer 1

看文档.empty() | jQueryAPI中文文档：

为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素。
如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用.detach()代替。

另外建议你console下数组吧，jQ封装的东西很多，学了原生的话可以和原生对比下。

Answer 2

操作2和操作3实质上是一样的。这个问题的本质在于，删除dom对象之后，关联的事件也会删除。