HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery与类库搭建 ——> jQuery中remove方法与detach方法的区别

jQuery中remove方法与detach方法的区别

2015/05/03 18:41:46 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:remove,detach,jQuery,jq

remove() & detach() 使用及区别

HTML5学堂:文章写于2015年04月14日,本来没什么事可以早点下班的,谁知道测试测出了问题,还是比较诡异的问题——页面中同类型的弹框出现第二次的时候所有的点击失效,而且不只是特殊功能的按钮,连关闭弹框的按钮也失效了。

本文源自热爱HTML5的“艾某人”的网易博客。

项目要求最近开始用Backbone,项目中的每一类弹框对应一个视图,在生成视图的过程中,事件已经绑定在弹框上的所有按钮上,只要在需要的时候插入DOM节点即可。经过多方排查,最终发现是remove()函数使用的问题。

remove方法的定义与用法

remove方法移除被选元素,包括所有文本和子节点。

该方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。

除了这个元素本身得以保留之外,remove()方法不会保留元素的jQuery数据,其他的比如绑定的事件、附加的数据等都会被移除,这一点和detach()方法不同。

detach方法的定义与用法

detach方法移除被选元素,包括所有文本和子节点。

方法会保留jQuery对象中的匹配元素,因而可以在将来再使用这些匹配的元素。

detach方法会保留所有绑定的事件、附加的数据,这一点与remove不同。

欢迎沟通交流~HTML5学堂

Demo验证remove与detach方法

remove()的例子

  1. $remove.click(function(){
  2.     $(this).remove();
  3.     alert('remove!!!'); // HTML5学堂 H5course
  4. })
  5. $back.click(function(){
  6.     $wrap.append($remove);
  7. })

界面如下:back的功能是将原来的元素重新插入到$wrap中。

HTML5学堂 remove与detach区别 remove方法

1、先点击“remove”的按钮,这个元素在DOM里面被移除掉,弹出提示。关闭提示就可以很明显的看到元素已经被移除了。

HTML5学堂 remove与detach区别 remove方法效果

2、点击“back”,通过class关联的元素重新插入到$wrap的元素中。这时候再次点击“remove”可以发现已经没办法点击了。

HTML5学堂 remove与detach区别 remove方法

detach()的例子

  1. $detach.click(function(){
  2.     $(this).detach();
  3.     alert('detach!!!'); // HTML5学堂 H5course
  4. })
  5. $back.click(function(){
  6.     $wrap.append($detach);
  7. })

界面如下:

HTML5学堂 remove与detach区别 detach方法

1、先点击“detach”的按钮,同remove这个元素在DOM里面被移除掉。

HTML5学堂 remove与detach区别 detach方法调试1

2、点击“back”,detach元素回来了。这时候再次点击“detach”,原来绑定的事件仍然存在!

HTML5学堂 remove与detach区别 detach方法调试2

注:代码中直接用click绑定事件,通过on或其他方法绑定也是有效果的。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS