鍍金池/ 問答/Java  數(shù)據(jù)庫(kù)  HTML/ 關(guān)于事件的疑惑,請(qǐng)看代碼.

關(guān)于事件的疑惑,請(qǐng)看代碼.

var $buttom=[];
        
//動(dòng)態(tài)添加按鈕
function addBtn() {
    var $dom = $('<button> 動(dòng)態(tài)按鈕' + 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();
};
//恢復(fù)按鈕
function recov(){
    $.each($buttom,function(i,n){
        $('#test1').append(n);
    });
};
//恢復(fù)按鈕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:
//問題:先添加按鈕,點(diǎn)擊事件可以輸出控制臺(tái)log,移除后恢復(fù),事件就沒有了.
addBtn();
del();
recov();
        
//操作方式2:
//問題:先添加按鈕,點(diǎn)擊事件可以輸出控制臺(tái)log,del()刪除后,用resetEve()方法添加,注意看里面內(nèi)容,
//里面是重新綁定事件后,還調(diào)用了一次del().為什么然后在append到界面,為什么這個(gè)時(shí)候事件又可以響應(yīng).
addBtn();
del();
resetEve();
        
//操作方式3:
//問題:先添加按鈕,點(diǎn)擊事件可以輸出控制臺(tái)log,不執(zhí)行刪除,直接用resetEve()方法添加,注意看里面內(nèi)容,
//里面是重新綁定事件后,還調(diào)用了一次del().為什么然后在append到界面,為什么這個(gè)時(shí)候事件又可以響應(yīng).
addBtn();
//del();
resetEve();

問題: 用變量保存的$dom,通過$dom綁定的事件會(huì)隨著empty()失去作用;

  1. 為什么通過$dom變量綁定的事件, 事件會(huì)丟失,這個(gè)變量命名還在,常規(guī)的理解中,它的事件也應(yīng)該還在,為什么就丟失了?
  2. 為什么我通過操作方式2的方式,通過數(shù)組儲(chǔ)存這個(gè)$dom變量,又可以呢?這里面的數(shù)組明明就是指針,指向的就是$dom的變量.中間的差別我想不到.但應(yīng)該一定是有地方不一樣,到底哪不一樣?

對(duì)于事件,一定是有什么我理解錯(cuò)了的地方.或者是依賴的地方,希望高手指條明路.

回答
編輯回答
夢(mèng)若殤

操作2和操作3實(shí)質(zhì)上是一樣的。這個(gè)問題的本質(zhì)在于,刪除dom對(duì)象之后,關(guān)聯(lián)的事件也會(huì)刪除。

2017年5月15日 13:11
編輯回答
失心人

看文檔.empty() | jQueryAPI中文文檔

為了避免內(nèi)存泄漏,jQuery先移除子元素的數(shù)據(jù)和事件處理函數(shù),然后移除子元素。
如果你想刪除元素,不破壞他們的數(shù)據(jù)或事件處理程序(這些綁定的信息還可以在之后被重新添加回來),請(qǐng)使用.detach()代替。

另外建議你console下數(shù)組吧,jQ封裝的東西很多,學(xué)了原生的話可以和原生對(duì)比下。

2018年7月29日 19:53