jQuery Clone Bug解决代码

首先,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="http://www.jb51.net">返回</a>
<div class="demo">click me</div>
<script src="http://demo.jb51.net/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

赞 (0)

相关推荐

  • 巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码

    web前端代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd.aspx.cs" Inherits="BatchAdd" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • jQuery中clone()方法用法实例

    本文实例讲述了jQuery中clone()方法用法.分享给大家供大家参考.具体分析如下: 此方法克隆匹配的DOM元素并且选中这些克隆的副本以及其所有的事件处理. 语法结构: 复制代码 代码如下: $(selector).clone(Events,deepEvents) 参数列表: 参数 描述 Events 可选.布尔值,用来规定事件处理函数是否被复制.默认为false. true-复制元素的所有事件处理. false-不复制元素的事件处理. deepEvents 可选.布尔值,用来规定是否对事件

  • jQuery复制节点用法示例(clone方法)

    jQuery复制节点用法示例(clone方法)

    本文实例讲述了jQuery复制节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jquery的clone方法应用于textarea和select的bug修复

    测试发现,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,发现这个是jquery的一个bug,上不了的可以看下代码,比较简单.就是在clone的时候将val再重新赋值一下,如果知道这个了,就简单了自己写. 引入到你要用的clone的页面就ok jquery.fix.clone.js (function (original) { jQuery.fn.clone = function () { var result = o

  • jQuery中clone()函数实现表单中增加和减少输入项

    jQuery中clone()函数实现表单中增加和减少输入项

    之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如: var copy_html=$(选择器).html(); alert(copy_html); 问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用: var copy_html=$(选择器).clone(); alert(copy_html); 得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法

  • JQuery中clone方法复制节点

    本文实例讲述了JQuery中clone方法复制节点.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jQuery Clone Bug解决代码

    首先,jQuery事件绑定的时候,所有事件用$.data()方法存储到了$.cache里面,用data('events')可以反复获取到它们: 复制代码 代码如下: var $div = $('div.demo'), data = $div.data(); // 获取所有绑定事件: var events = data.events; // 除了window对象绑定事件的比较特殊: var windowEvents = $(window).data('__events__'); 在必要的时候,可以

  • jquery构造器的实现代码小结

    显然,能做到这一步,其实现是相当的复杂,这个实现就是它的init方法,jQuery的真实构造器.它功能也随着版本的升级而升级,越来越长. 2009-01-13发布的1.3版 复制代码 代码如下: init: function( selector, context ) { // Make sure that a selection was provided selector = selector || document; // 处理节点参数,直接添加属性到新实例上 if ( selector.no

  • Juqery Html(),append()等方法的Bug解决方法

    Juqery Html(),append()等方法的Bug解决方法

    这几天在做动态加载图片热区,我用Ajax获取到了area标签,这里有多个area,在IE8和FF里测试正常,可一到IE7,和IE6里面就显示不正常了. 后来发现jquery中的append将HTML加入到标签里的方法都不好用,都会出现下面的问题 先给出我的获取热区的代码 下面是热的HTML 复制代码 代码如下: <img src="Image.aspx?reganise_id=<%=ViewState["RegionValue"]%><%=ViewSt

  • git clone下来的代码如何放在指定路径

    今天从github上clone了代码,最后出来形如: 但是话说我的东西下载到哪里去了呢????摸不着头脑,然后百度之,发现一般会放在命令行对应的路径下,也就是 win + R > cmd 查看命令行地址: 然后去此路径下寻找之,果然在这里. 那么,如何才能clone到自己指定的路径下呢?百度之得如下说法: git clone https://github.com/jquery/jquery.git e:/myJQuery/ 以上命令行的结尾,指定你想要的目录. git clone克隆或下载一个仓

  • Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    本文实例讲述了Thinkphp中volist标签mod控制一定记录的换行BUG解决方法.分享给大家供大家参考.具体方法如下: 一.BUG描述: 存在于thinkphp 2.0 版本 Mod属性还用于控制一定记录的换行,例如: 复制代码 代码如下: <volist name="list" id="vo" mod="5" > {$vo.name} <eq name="mod" value="4"

  • jQuery内存泄露解决办法

    本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下 思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力 ;(function($){ if(!$.lui.widget) $.lui.widget = {}; //$.lui.newGuid()生成随机32位id //如果采用此方式多次生成jquery对象的话,html代码字符串会在内存中多次重复,占用额外的内容,也会有泄露.而$("<span></span>").at

  • JQuery与Ajax常用代码实现对比

    传统ajax Code 复制代码 代码如下: <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if(window.XMLHttpRequest) xmlHttp = new XMLHttpRe

  • 自制轻量级仿jQuery.boxy对话框插件代码

    对此,jquery.boxy插件已经做得非常强大了,常用的提示.确认,拖拽.改变大小.异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧. 首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在6K以下.因为还未完成,所以先将思想记录下来.

  • jQuery基于随机数解决中午吃什么去哪吃问题示例

    jQuery基于随机数解决中午吃什么去哪吃问题示例

    本文实例讲述了jQuery基于随机数解决中午吃什么去哪吃问题.分享给大家供大家参考,具体如下: 一个解决中午吃什么去哪吃的程序 这下不用每天都纠结吃什么了! 代码功能类似于前面一篇<jQuery实现的老虎机跑动效果>,很有意思 例一: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style

  • vant-ui框架的一个bug(解决切换后onload不触发)

    前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np

随机推荐