Home » Code » jQuery中remove()与detach()的区别

jQuery中remove()与detach()的区别

好吧,其实我之前不知道有detach()这回事,今天看文章无意间看到,故了解了一下。

手册上如是说:

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

意思说是说,这个对象在浏览上你是看不到了,但它仍然存在于内存中并且在它上边绑定的事件保存的数据都还在。其实remove()之后对象也还存在于内存之中,只是它上边绑定的事件和保存的数据给删除了,区别在这里。下面看一个具体例子就什么都明白了:

<div id="test">默认文字</div>

<button id="remove">remove之</button>
<button id="detach">detach之</button>

<div id="parent"></div>
<button id="reset">重置</button>

我们在#test上绑定hover事件,然后将#test进行remove和detach操作,操作后再将之append到#parent之中,看它的hover事件是否还存在。

var $test = $("#test"), $remove = $("#remove"), $detach = $("#detach"), $parent = $("#parent"), $reset = $("#reset");
$test.hover(function(){
	$(this).text("鼠标在上边");
}, function(){
	$(this).text("鼠标移开了");
});

$detach.click(function(){
	$test.detach().appendTo($parent);
});
$remove.click(function(){
	$test.remove().appendTo($parent);
});

$reset.click(function(){
	$test.hover(function(){
		$(this).text("鼠标在上边");
	}, function(){
		$(this).text("鼠标移开了");
	}).prependTo($("body"));
})

DEMO如下:

由上边可以清楚的看到二者的区别,就是绑定的事件与保存的数据(data()方法)是否还存在的区别!

又水了一篇~。~

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.