jQuery DOM 操作 detach()

ページ上のノードを一時的に削除したいが、ノード上のデータとイベントが失われることは望ましくなく、削除されたノードを次の期間にページ上に表示できる場合は、デタッチを使用できます。それを処理する方法

detach 文字通りに理解するのは簡単です。 Web 要素をホストします。つまり、要素は現在のページから削除されますが、この要素のメモリモデルオブジェクトは保持されます。

jquery 公式ドキュメントの説明を見てみましょう:

このメソッドは jQuery オブジェクトから一致する要素を削除しないため、これらの一致する要素は将来再び使用できます。 Remove() とは異なり、すべてのバインドされたイベント、添付データなどが保持されます。
$("div").detach() はオブジェクトを削除しますが、表示効果は失われます。しかし、それは記憶の中にまだ存在しています。追加すると、ドキュメントフローに戻ります。またまた現れました。

もちろん、ここでは特別な注意を払う必要があります。デタッチメソッドは JQuery に固有のものであるため、JQuery メソッドを通じてバインドされたイベントまたはデータのみを処理できます。

$("p を介して右側のコード領域を参照してください。 ").detach() P 要素をすべて削除した後、削除した p 要素を追加でページに配置します。テキストをクリックすると、イベントが失われていないことが証明できます

サンプルコードを見てみましょう:

りー

学び続ける

新しいファイル

<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>

提出するリセットコード

自動運転