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

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()失去作用;

为什么通过$dom变量绑定的事件, 事件会丢失,这个变量命名还在,常规的理解中,它的事件也应该还在,为什么就丢失了?

为什么我通过操作方式2的方式,通过数组储存这个$dom变量,又可以呢?这里面的数组明明就是指针,指向的就是$dom的变量.中间的差别我想不到.但应该一定是有地方不一样,到底哪不一样?

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

Answer 1

看文档.empty() | jQueryAPI中文文档：为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素。如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用.detach()代替。另外建议你console下数组吧，jQ封装的东西很多，学了原生的话可以和原生对比下。