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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
主题酒店策划书
2014/01/28 职场文书
环保宣传标语
2014/06/12 职场文书
政府采购方案
2014/06/12 职场文书
新农村建设汇报材料
2014/08/15 职场文书
村安全生产责任书
2014/08/25 职场文书
协会周年庆活动方案
2014/08/26 职场文书
商业用房租赁协议书
2014/10/13 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
公开致歉信
2019/06/24 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书