jQuery Clone Bug solution code_jquery

First of all, when binding jQuery events, all events are stored in $.cache using the $.data() method, and they can be obtained repeatedly using data('events'):

Copy code The code is as follows:

var $div = $('div.demo'), data = $div.data();
// Get all binding events:
var events = data.events;
// Except for the special binding events of the window object:
var windowEvents = $(window).data('__events__' ; 🎜> The code is as follows:

var clickHandler = function(){
console.log('click test');

}; $div.click(clickHandler); events.click.some(function(ev){ return ev.handler === clickHandler; });

BUG example

Copy code


The code is as follows:

BUG source




Copy code


The code is as follows:

// 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 );

}

}


After 1.4.2, events[type] is an array, and the for...in loop will get all the methods extended on the array prototype, and then bind them to the DOM object.
Solution
Do not extend the array prototype and do not use the clone(true) method.
hasOwnProperty check.
Use each loop:




Copy code

The code is as follows:


var self = this;
for ( var type in events ) {

jQuery.each(events[ type ],function(idx,evt) { jQuery.event.add( self, type, evt.handler, evt.data ; > The code is as follows:

doClone
Return

click me

Online demo /js/jquery_clone_bug/jQuery_clone_bug_demo.htm