jQuery Clone Bug解决代码


Posted in Javascript onDecember 22, 2010

首先,jQuery事件绑定的时候,所有事件用$.data()方法存储到了$.cache里面,用data('events')可以反复获取到它们:

var $div = $('div.demo'), data = $div.data(); 
// 获取所有绑定事件: 
var events = data.events; 
// 除了window对象绑定事件的比较特殊: 
var windowEvents = $(window).data('__events__');

在必要的时候,可以检索有没有绑定相关处理函数:
var clickHandler = function(){ 
console.log('click test'); 
}; 
$div.click(clickHandler); 
events.click.some(function(ev){ 
return ev.handler === clickHandler; 
});

BUG示例
<script type="text/javascript"> 
Array.prototype.xyzz = function (arg) { 
console.log(1,this,arg); 
}; 
Array.prototype.xyzzz = function (arg) { 
console.log(2,this,arg); 
}; 
$(function() { 
$('button').click(function () { 
$('div.demo').clone(true).appendTo( 'body' ); 
}) 
$('div.demo').click(function () { 
console.log('click..'); 
}) 
}); 
</script>

BUG来源
// event.js, jQuery.event.add: 
// jQuery 1.4.1 
handlers = events[ type ] = {}; 
// jQuery 1.4.2+ 
handlers = events[ type ] = []; 
// manipulation.js, jQuery.clone : , cloneCopyEvent(): 
for ( var type in events ) { 
for ( var handler in events[ type ] ) { 
jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data ); 
} 
}

在1.4.2之后,events[ type ]为数组,for...in循环会获取到数组原型上扩展的所有方法,接着绑定到DOM对象上。
解决
不扩展数组原型,不使用clone(true)方法。
hasOwnProperty检查。
使用each循环:
var self = this; 
for ( var type in events ) { 
jQuery.each(events[ type ],function(idx,evt) { 
jQuery.event.add( self, type, evt.handler, evt.data ); 
}); 
}

完整演示代码:
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery Clone Bug</title> 
<style type="text/css"> 
.demo{ margin:1em;background:#07a; height:10em; width:10em; } 
</style> 
</head> 
<body> 
<button>doClone</button> 
<a href="https://3water.com">返回</a> 
<div class="demo">click me</div> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.4.4.js"></script> 
<script type="text/javascript"> 
Array.prototype.xyzz = function (arg) { 
console.log(1,this,arg); 
}; 
Array.prototype.xyzzz = function (arg) { 
console.log(2,this,arg); 
}; 
$(function() { 
$('button').click(function () { 
$('div.demo').clone(true).appendTo( 'body' ); 
}) 
$('div.demo').click(function () { 
console.log('click..'); 
}) 
}); 
// var events = $('div.demo:eq(0)').data().events 
// manipulation.js : cloneCopyEvent 
// :line 372 
// for ( var type in events ) { 
// for ( var handler in events[ type ] ) { 
// console.log(handler); 
// } 
// } 
// console.log($.isArray(events['click'])) 
// 原因 
// event.js : event.add 
// :line 106 
// handlers = events[ type ] = []; 
</script> 
</body> 
</html>

在线演示 /js/jquery_clone_bug/jQuery_clone_bug_demo.htm
Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 #Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
jquery里的each使用方法详解
Dec 22 #Javascript
jQuery学习笔记之jQuery的动画
Dec 22 #Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python3匿名函数用法示例
2018/07/25 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Whistles官网:英国女装品牌
2020/08/14 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
电子商务应届生求职信
2013/11/16 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
红色经典观后感
2015/06/18 职场文书
交通处罚决定书
2015/06/24 职场文书
八年级作文之友情
2019/11/25 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android