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

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);    });};//恢复按钮2function 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()失去作用;为什么通过$dom变量绑定的事件, 事件会丢失,这个变量命名还在,常规的理解中,它的事件也应该还在,为什么就丢失了?为什么我通过操作方式2的方式,通过数组储存这个$dom变量,又可以呢?这里面的数组明明就是指针,指向的就是$dom的变量.中间的差别我想不到.但应该一定是有地方不一样,到底哪不一样?对于事件,一定是有什么我理解错了的地方.或者是依赖的地方,希望高手指条明路.

Answer 1

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

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

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