If never been much of a front-end developer, but as most developers I manage my tags pretty well;-) but javascript has always been hell. I always stayed away from it but with JQuery the ballpark has changed a lot! Traversing the DOM has never been simpler, adding elements and attributes, moving them around, Childs play.
Yesterday my college noticed that the functionality I build for selecting checkbox items in div-popup’s didn’t work in IE8. So I’ve been puzzling why this was happing, this morning I found the culprit, it was the usage of the JQuery Clone method.
JQuery offers a function to copy a element with all its events but as I found out the hard way checked state isn’t maintained during the function execution under Internet Explorer 6/7/8.
The workaround I chose is to implement was to override the clone function from JQuery itself. Note this clone function wasn’t approved to put in the core of JQuery due to performance reasons.
Overriding is quit simple just put the following script function in a javascript tag in your page (or separate file) . And call the function, the overriding magic is just on line Number 8.
1: function overrideJqueryClone()
2: {
3: (function () {
4: // Store a reference to the original remove method.
5: var originalRemoveMethod = jQuery.fn.clone;
6:
7: // Define overriding method.
8: jQuery.fn.clone = function (deep) {
9: deep = deep != undefined ? deep : true;
10: var $this;
11: if (jQuery.browser.msie) {
12: $this = this.add(this.find("*"));
13: // Need to remove events on the element and its descendants
14: $this.each(function () {
15: this._$events = {};
16: for (var type in this.$events)
17: this._$events[type] = jQuery.extend({}, this.$events[type]);
18: }).unbind();
19: }
20: // Do the clone
21: var copy = false, r = this.pushStack(jQuery.map(this, function (a) {
22: if (!copy && deep && (a.hasChildNodes() || jQuery.nodeName(a, "select") || jQuery.nodeName(a, "input"))) copy = true;
23: return a.cloneNode(deep);
24: }));
25: if (jQuery.browser.msie) {
26: $this.each(function () {
27: // Add the events back to the original and its descendants
28: var events = this._$events;
29: for (var type in events)
30: for (var handler in events[type])
31: jQuery.event.add(this, type, events[type][handler], events[type][handler].data);
32: this._$events = null;
33: });
34: }
35: // copy form values over
36: if (copy) {
37: if (!jQuery.browser.msie)
38: $this = this.add(this.find("*"));
39: var origInputs = $this.filter('select,input[@type=checkbox]');
40: if (origInputs.length) {
41: var inputs = r.add(r.find('*')).filter('select,input[@type=checkbox]');
42: origInputs.each(function (i) {
43: if (this.selectedIndex)
44: inputs[i].selectedIndex = this.selectedIndex;
45: if (this.checked)
46: inputs[i].checked = true;
47: });
48: }
49: }
50: // Return the cloned set
51: return r;
52: }
53: })();
54: }
55: