First, when the jquery event is bound, all events are stored in the $.cache with the $.data () method, which can be retrieved repeatedly with data (' Events '):
Copy Code code as follows:
var $div = $ (' Div.demo '), data = $div. Data ();
Get all Binding events:
var events = data.events;
In addition to the Window object binding events are more special:
var windowevents = $ (window). Data (' __events__ ');
When necessary, you can retrieve the binding-related handler function:
Copy Code code 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 code as follows:
<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 Source
Copy Code code 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 gets all the methods that are extended on the array prototype, and then binds to the DOM object.
Solve
Do not extend the array prototype without using the Clone (True) method.
hasOwnProperty check.
Use Each loop:
Copy Code code 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);
});
}
Full Demo Code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>jquery Clone bug</title>
<style type= "Text/css" >
. demo{margin:1em;background: #07a; height:10em; width:10em;}
</style>
<body>
<button>doClone</button>
<a href= "Http://www.jb51.net" > Return </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 '))
Reason
Event.js:event.add
: Line 106
handlers = events[Type] = [];
</script>
</body>
Online Demo/js/jquery_clone_bug/jquery_clone_bug_demo.htm
