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中的call实现继承
Jan 22 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
修改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
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php获取excel文件数据
2017/04/21 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP的PDO连接讲解
2019/01/24 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JS获取父节点方法
2009/08/20 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python九九乘法表的实例
2017/09/26 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python3.4解释器用法简单示例
2019/03/22 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
教师实习自我鉴定
2013/12/13 职场文书
《识字五》教学反思
2014/03/01 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
会计学自荐信
2014/06/03 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
2015年助残日活动总结
2015/03/27 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers