페이지에서 노드를 일시적으로 삭제하고 싶지만 노드의 데이터와 이벤트가 손실되는 것을 원하지 않고 다음 기간에 삭제된 노드가 페이지에 표시되도록 하려면 분리를 사용할 수 있습니다. 처리 방법
detach 말 그대로 이해하기 쉽습니다. 웹 요소를 호스팅하자. 즉, 요소가 현재 페이지에서 제거되지만 이 요소의 메모리 모델 개체는 유지됩니다.
jquery 공식 문서의 설명을 살펴보겠습니다.
이 메서드는 jQuery 개체에서 일치하는 요소를 삭제하지 않으므로 이러한 일치하는 요소는 나중에 다시 사용할 수 있습니다. 제거()와 달리 모든 바인딩된 이벤트, 첨부된 데이터 등이 유지됩니다.
$("div").detach()는 개체를 제거하지만 표시 효과는 사라집니다. 그러나 그것은 아직도 기억 속에 존재한다. 추가하면 문서 흐름으로 돌아갑니다. 다시 나타났습니다.
물론 여기서 주의할 점은 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>
다음 섹션