operasi DOM jQuery detach()
Jika kita ingin memadamkan sementara nod pada halaman, tetapi tidak mahu data dan peristiwa pada nod itu hilang, dan boleh mempunyai nod yang dipadamkan dipaparkan pada halaman dalam tempoh masa seterusnya, maka kita boleh menggunakan kaedah detach untuk mengendalikannya
detach mudah difahami secara literal. Biarkan elemen web dihoskan. Iaitu, elemen dialih keluar daripada halaman semasa, tetapi objek model memori elemen ini dikekalkan.
Mari kita lihat penjelasan daripada dokumentasi rasmi jquery:
Kaedah ini tidak akan memadamkan elemen padanan daripada objek jQuery, jadi elemen padanan ini boleh digunakan semula pada masa hadapan. Tidak seperti remove(), semua peristiwa terikat, data yang dilampirkan, dsb. akan dikekalkan.
$("div").detach() akan mengalih keluar objek, tetapi kesan paparan akan hilang. Tetapi ia masih wujud dalam ingatan. Apabila anda menambah, anda kembali ke aliran dokumen. Ia muncul semula.
Sudah tentu, perhatian khusus harus diberikan di sini Kaedah detach adalah unik untuk JQuery, jadi ia hanya boleh memproses peristiwa atau data yang terikat melalui kaedah JQuery
Rujuk kawasan kod. di sebelah kanan, melalui $("p").detach() memadamkan semua elemen P, dan kemudian meletakkan elemen p yang dipadam pada halaman melalui lampiran Dengan mengklik pada teks, anda boleh membuktikan bahawa acara itu tidak hilang
Mari kita lihat di bawah Contoh kod:
<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; //去重
//通過(guò)detach方法刪除元素
//只是頁(yè)面不可見(jiàn)，但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中
//數(shù)據(jù)與事件都不會(huì)丟失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到頁(yè)面中
//事件還是存在
$("body").append(p);
});
</script>
</body>
</html>
