由于DOM中的綁定和移除的方法名為appendChild和removeChild,所以使用jQuery時也會聯(lián)想到append和remove。但實際上在jQuery中append對應的是detach而不是remove。jQuery的remove是一個很兇殘的方法,它會把對象上綁定的事件都移除掉。
可以執(zhí)行這樣的代碼試試
$(function(){
var div=$("<div/>").click(function(e){
console.log(e);
}).text("次碳酸鈷");
//劫持DOM上的removeEventListener
div[0].removeEventListener=function(){
console.log("啊!?我怎么被移除了。。");
};
//調用remove后再放入body中,click將永遠都不會觸發(fā)
div.remove().appendTo(document.body);
});
這里我就不截圖了,劫持的removeEventListener方法會被調用到。上面的代碼運行后div點擊事件是無效的,因為jQuery中的事件列表已經(jīng)因為remove的調用而清空了。所以不要輕易使用remove方法!另外,empty和html這些方法也都會調用remove,所以也要慎用!
$(function(){
var div=$("<div/>").click(function(e){
console.log(e);
}).text("次碳酸鈷").appendTo(document.body);
//劫持DOM上的removeEventListener
div[0].removeEventListener=function(){
console.log("啊!?我怎么被移除了。。");
};
//清空html,上面的劫持方法依然會被調用
$(document.body).html("");
//$(document.body).empty(); //使用empty也和html("")一樣
});
如果只需要移除DOM而保留事件應該使用detach,例如
$(function(){
var div=$("<div/>").click(function(e){
console.log(e);
}).text("次碳酸鈷").appendTo(document.body);
//劫持DOM上的removeEventListener
div[0].removeEventListener=function(){
console.log("啊!?我怎么被移除了。。");
};
//這樣才不會移除事件,click事件可以正常觸發(fā)
div.detach().appendTo(document.body);
//DOM的removeChild也是如此,click事件依然可以正常觸發(fā)
document.body.removeChild(div[0]);
document.body.appendChild(div[0]);
});
當前題目:jQuery的append對應的是detach還是remove
網(wǎng)頁URL:http://vcdvsql.cn/news20/320370.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信小程序、域名注冊、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、建站公司、Google
廣告
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源:
創(chuàng)新互聯(lián)