注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】remove() & detach() 使用及区别  

2015-04-15 15:19:19|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  就在昨天,本来没什么事可以早点下班的,谁知道测试测出了问题,还是比较诡异的问题——页面中同类型的弹框出现第二次的时候所有的点击失效,而且不只是特殊功能的按钮,连关闭弹框的按钮也失效了。

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

W3Schoolremove()的定义和用法如下:

remove()  detach() 使用及区别 - 艾某人 - 艾某人
W3Schooldetach()的定义和用法如下:

remove()  detach() 使用及区别 - 艾某人 - 艾某人

用以下DEMO验证一下。

remove()的例子:

部分代码如下:// remove DEMO

$remove.click(function(){
$(this).remove();
alert('remove!!!');
})
$back.click(function(){
$wrap.append($remove);
})

界面如下:back的功能是将原来的元素重新插入到$wrap中。
remove()  detach() 使用及区别 - 艾某人 - 艾某人
 1、先点击“remove”的按钮,这个元素在DOM里面被移除掉,弹出提示。关闭提示就可以很明显的看到元素已经被移除了。
remove()  detach() 使用及区别 - 艾某人 - 艾某人remove()  detach() 使用及区别 - 艾某人 - 艾某人
 2、点击“back”,通过class关联的元素重新插入到$wrap的元素中。这时候再次点击“remove”可以发现已经没办法点击了。
remove()  detach() 使用及区别 - 艾某人 - 艾某人

detach()的例子:(ps:神奇的detach()~~~
 部分代码如下: // detach DEMO

$detach.click(function(){
$(this).detach();
alert('detach!!!');
})
$('.back').click(function(){
$wrap.append($detach);
})

界面如下:
remove()  detach() 使用及区别 - 艾某人 - 艾某人
 1、先点击“detach”的按钮,同remove这个元素在DOM里面被移除掉。
remove()  detach() 使用及区别 - 艾某人 - 艾某人remove()  detach() 使用及区别 - 艾某人 - 艾某人
  2、点击“back”,detach元素回来了。这时候再次点击detach”,原来绑定的事件仍然存在
remove()  detach() 使用及区别 - 艾某人 - 艾某人remove()  detach() 使用及区别 - 艾某人 - 艾某人
 注:代码中直接用click绑定事件,通过on或其他方法绑定也是有效果的。

作者附言:感觉我好像用很复杂的方式讲述了两者的区别……理解就好理解就好。
  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017