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客户端脚本的设计和应用
Aug 21 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
修改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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP 开源框架22个简单简介
2009/08/24 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
介绍一下gcc特性
2015/10/31 面试题
青年教师师德演讲稿
2014/08/26 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
个人专业技术总结
2015/03/05 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python