jQuery DOM 操作之detach()
如果我們希望臨時(shí)刪除頁面上的節(jié)點(diǎn)，但是又不希望節(jié)點(diǎn)上的數(shù)據(jù)與事件丟失，并且能在下一個(gè)時(shí)間段讓這個(gè)刪除的節(jié)點(diǎn)顯示到頁面，這時(shí)候就可以使用detach方法來處理
detach從字面上就很容易理解。讓一個(gè)web元素托管。即從當(dāng)前頁面中移除該元素，但保留這個(gè)元素的內(nèi)存模型對(duì)象。
來看看jquery官方文檔的解釋：
這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來。
$("div").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當(dāng)你append之后，又重新回到了文檔流中。就又顯示出來了。
當(dāng)然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)
參考右邊的代碼區(qū)域，通過?$("p").detach()把所有的P元素刪除后，再通過append把刪除的p元素放到頁面上，通過點(diǎn)擊文字，可以證明事件沒有丟失
下面我們來看實(shí)例代碼：
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>P元素1，默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p>
<p>P元素2，默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p>
<button id="bt1">點(diǎn)擊刪除 p 元素</button>
<button id="bt2">點(diǎn)擊移動(dòng) p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通過detach方法刪除元素
//只是頁面不可見，但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中
//數(shù)據(jù)與事件都不會(huì)丟失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到頁面中
//事件還是存在
$("body").append(p);
});
</script>
</body>
</html>
