jQuery Clone Bug解決代碼
更新時(shí)間:2010年12月22日 15:48:06 作者:
jQuery Clone Bug解決代碼,具體看測(cè)試代碼。
首先,jQuery事件綁定的時(shí)候,所有事件用$.data()方法存儲(chǔ)到了$.cache里面,用data('events')可以反復(fù)獲取到它們:
var $div = $('div.demo'), data = $div.data();
// 獲取所有綁定事件:
var events = data.events;
// 除了window對(duì)象綁定事件的比較特殊:
var windowEvents = $(window).data('__events__');
在必要的時(shí)候,可以檢索有沒有綁定相關(guān)處理函數(shù):
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 ]為數(shù)組,for...in循環(huán)會(huì)獲取到數(shù)組原型上擴(kuò)展的所有方法,接著綁定到DOM對(duì)象上。
解決
不擴(kuò)展數(shù)組原型,不使用clone(true)方法。
hasOwnProperty檢查。
使用each循環(huán):
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.dbjr.com.cn">返回</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
復(fù)制代碼 代碼如下:
var $div = $('div.demo'), data = $div.data();
// 獲取所有綁定事件:
var events = data.events;
// 除了window對(duì)象綁定事件的比較特殊:
var windowEvents = $(window).data('__events__');
在必要的時(shí)候,可以檢索有沒有綁定相關(guān)處理函數(shù):
復(fù)制代碼 代碼如下:
var clickHandler = function(){
console.log('click test');
};
$div.click(clickHandler);
events.click.some(function(ev){
return ev.handler === clickHandler;
});
BUG示例
復(fù)制代碼 代碼如下:
<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來源
復(fù)制代碼 代碼如下:
// 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 ]為數(shù)組,for...in循環(huán)會(huì)獲取到數(shù)組原型上擴(kuò)展的所有方法,接著綁定到DOM對(duì)象上。
解決
不擴(kuò)展數(shù)組原型,不使用clone(true)方法。
hasOwnProperty檢查。
使用each循環(huán):
復(fù)制代碼 代碼如下:
var self = this;
for ( var type in events ) {
jQuery.each(events[ type ],function(idx,evt) {
jQuery.event.add( self, type, evt.handler, evt.data );
});
}
完整演示代碼:
復(fù)制代碼 代碼如下:
<!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.dbjr.com.cn">返回</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
相關(guān)文章
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法,在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因,這兩個(gè)問題都非常多見,感興趣的朋友一起看下吧2016-08-08jQuery選擇器源碼解讀(八):addCombinator函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀(八):addCombinator函數(shù),本文用詳細(xì)的注釋解讀了addCombinator函數(shù)的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效,講解內(nèi)容很詳細(xì),條理清晰,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12jQuery UI工具提示框部件Tooltip Widget
這篇文章介紹了jQuery UI工具提示框部件Tooltip Widget,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果,下拉聯(lián)動(dòng)是基于query的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02JQuery.validationEngine表單驗(yàn)證插件(推薦)
這篇文章主要介紹了JQuery.validationEngine表單驗(yàn)證插件(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12