Opération jQuery DOM détacher ()
Si nous voulons supprimer temporairement un n?ud sur la page, mais que nous ne voulons pas que les données et les événements sur le n?ud soient perdus et que le n?ud supprimé puisse être affiché sur la page au cours de la période suivante, nous pouvons utiliser la méthode de détachement pour le gérer
detach est facile à comprendre littéralement. Laissez un élément Web être hébergé. Autrement dit, l'élément est supprimé de la page actuelle, mais l'objet de modèle de mémoire de cet élément est conservé.
Jetons un coup d'?il à l'explication de la documentation officielle de jquery?:
Cette méthode ne supprimera pas les éléments correspondants de l'objet jQuery, donc ces éléments correspondants pourront être réutilisés à l'avenir. Contrairement à Remove(), tous les événements liés, les données jointes, etc. seront conservés.
$("div").detach() supprimera l'objet, mais l'effet d'affichage dispara?tra. Mais il existe toujours en mémoire. Lorsque vous ajoutez, vous revenez au flux de documents. Il est réapparu.
Bien s?r, une attention particulière doit être portée ici. La méthode detach est unique à JQuery, elle ne peut donc traiter que les événements ou les données liés via les méthodes JQuery
Reportez-vous à la zone de code. à droite, via $("p").detach() supprime tous les éléments P, puis place les éléments p supprimés sur la page via append. En cliquant sur le texte, vous pouvez prouver que l'événement n'est pas perdu
Jetons un coup d'oeil ci-dessous Exemple de code?:<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>
