Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

jQuery的append对应的是detach而不是remove

  由于DOM中的绑定和移除的方法名为appendChild和removeChild,所以使用jQuery时也会联想到append和remove。但实际上在jQuery中append对应的是detach而不是remove。jQuery的remove是一个很凶残的方法,它会把对象上绑定的事件都移除掉。
  可以执行这样的代码试试 $(function(){
  var div=$("<div/>").click(function(e){
    console.log(e);
  }).text("次碳酸钴");
  //劫持DOM上的removeEventListener
  div[0].removeEventListener=function(){
    console.log("啊!?我怎么被移除了。。");
  };
  //调用remove后再放入body中,click将永远都不会触发
  div.remove().appendTo(document.body);
});
  这里我就不截图了,劫持的removeEventListener方法会被调用到。上面的代码运行后div点击事件是无效的,因为jQuery中的事件列表已经因为remove的调用而清空了。所以不要轻易使用remove方法!另外,empty和html这些方法也都会调用remove,所以也要慎用!
$(function(){
  var div=$("<div/>").click(function(e){
    console.log(e);
  }).text("次碳酸钴").appendTo(document.body);
  //劫持DOM上的removeEventListener
  div[0].removeEventListener=function(){
    console.log("啊!?我怎么被移除了。。");
  };
  //清空html,上面的劫持方法依然会被调用
  $(document.body).html("");
  //$(document.body).empty(); //使用empty也和html("")一样
});
  如果只需要移除DOM而保留事件应该使用detach,例如
$(function(){
  var div=$("<div/>").click(function(e){
    console.log(e);
  }).text("次碳酸钴").appendTo(document.body);
  //劫持DOM上的removeEventListener
  div[0].removeEventListener=function(){
    console.log("啊!?我怎么被移除了。。");
  };
  //这样才不会移除事件,click事件可以正常触发
  div.detach().appendTo(document.body);
  //DOM的removeChild也是如此,click事件依然可以正常触发
  document.body.removeChild(div[0]);
  document.body.appendChild(div[0]);
});
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^