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，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
</body>
</html>
bahagian seterusnya