欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Clone Bug解決代碼

 更新時(shí)間:2010年12月22日 15:48:06   作者:  
jQuery Clone Bug解決代碼,具體看測(cè)試代碼。
首先,jQuery事件綁定的時(shí)候,所有事件用$.data()方法存儲(chǔ)到了$.cache里面,用data('events')可以反復(fù)獲取到它們:
復(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í)行問題的解決方法

    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-08
  • jQuery選擇器源碼解讀(八):addCombinator函數(shù)

    jQuery選擇器源碼解讀(八):addCombinator函數(shù)

    這篇文章主要介紹了jQuery選擇器源碼解讀(八):addCombinator函數(shù),本文用詳細(xì)的注釋解讀了addCombinator函數(shù)的實(shí)現(xiàn)源碼,需要的朋友可以參考下
    2015-03-03
  • jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效

    jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效

    這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效,講解內(nèi)容很詳細(xì),條理清晰,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2015-12-12
  • jQuery最佳實(shí)踐完整篇

    jQuery最佳實(shí)踐完整篇

    那篇文章是一篇入門教程,從設(shè)計(jì)思想的角度,講解"怎么使用jQuery"。今天的文章則是更進(jìn)一步,講解"如何用好jQuery"。
    2011-08-08
  • jQuery UI工具提示框部件Tooltip Widget

    jQuery UI工具提示框部件Tooltip Widget

    這篇文章介紹了jQuery UI工具提示框部件Tooltip Widget,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • jQuery實(shí)現(xiàn)瀑布流布局

    jQuery實(shí)現(xiàn)瀑布流布局

    上篇文章我們介紹了使用原生的javascript實(shí)現(xiàn)了圖片瀑布流效果,本文我們來用jQuery來實(shí)現(xiàn)同樣的效果。
    2014-12-12
  • jquery 插件學(xué)習(xí)(四)

    jquery 插件學(xué)習(xí)(四)

    如果你明白了前面講的使用jquery.fn對(duì)象屬性的方法創(chuàng)建jquery對(duì)象的方法,那么使用extend()方法創(chuàng)建jquery對(duì)象就比較容易理解了。理解了嗎,一定要仔細(xì)揣摩,仔細(xì)研究。我也是再慢慢的學(xué)習(xí),慢慢的領(lǐng)悟
    2012-08-08
  • 基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)

    基于?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-02
  • JQuery.validationEngine表單驗(yàn)證插件(推薦)

    JQuery.validationEngine表單驗(yàn)證插件(推薦)

    這篇文章主要介紹了JQuery.validationEngine表單驗(yàn)證插件(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-12-12
  • jQuery彈出層插件Lightbox_me使用指南

    jQuery彈出層插件Lightbox_me使用指南

    在使用discuzx中有一個(gè)Message以及Dialog方法來顯示信息對(duì)話框。今天寫項(xiàng)目的時(shí)候,需要一個(gè)信息對(duì)話框,所以就著手利用lightbox_me插件來寫一個(gè)做備用。
    2015-04-04

最新評(píng)論