MooTools events not firing in IE8

Question

I have a Mootools asset created like so:

// Create a new asset
var asset = new Asset.image(path, {
    title: this.language.download,
    events: {click: this.download.bind(this, link)},
});

I have a method of a MooTools object defined as such:

download: function(e) { 
    // The path to download
    console.log('download: ' + e);
},

In Firefox the console.log print shows up. In IE8, however, I have no luck. Am I missing something?

Any tips or advice would be greatly appreciated. TIA!

Answer 1

In view of further communication via email... and the fact that the issue is caused by the use of filemanager mootools plugin by cpojer (of the mootools core team), I am updating my reply to the advice given via email as well.

source code in question: http://github.com/cpojer/mootools-filemanager/raw/master/Source/FileManager.js - line 408 is the problem

The reason why the original code may fail (in IE8) but i'd consider it unsafe as is anyway - is that events in mootools are UID driven per element. I.E. - if you inject an element or pass it through a selector and possibly create it via new Element() class (tbc), it assigns it a UID against which element storage is enabled. It is possible that the chaining used in the original form results in the addEvent running before the element exists which would cause it to fail. The issue here is WHY would it fail to attach the events when all tests I have conducted seem to work. Basically, the Asset.image code goes:

var image = new Image();
var element = document.id(image) || new Element('img');
element.store("foo", "bar");
alert(element.retrieve("foo") || "failed");

this DOES assign a UID and makes it available for events even before it's a member of the DOM. tescase: http://fragged.org/dev/ie8-new-image-bug.php - does that output 'bar' for you? if so, there is no reason to suspect foul play on the order of assignment of events vs DOM insertion due to storage anyway, it could be a total manipulation issue / onclick problem.

Either way, you can try replacing the code in the class with this, аlthough I have not tested it:

var _this = this;
icons.push(new Asset.image(this.options.assetBasePath + 'disk.png', {
    title: this.language.download
    "class": 'browser-icon',
    onload: function() {
        // once the src has been set and image loaded
        // inject into DOM (hence open to manilulations) and then add the event
        this.inject(el, 'top').addEvent('click', function(e) {
            _this.tips.hide();
            e.stop();
            window.open(_this.options.baseURL + _this.normalize(_this.Directory + '/' + file.name));
        });
    }
}));

also to consider: IE has - in the past - been known to have issues with cached images being loaded up failing to trigger events if the assignment of the event is wrong way around:

// wrong:
var image = new Image();
image.src = 'image.jpg';
image.onload = function() { // evil, won't work if image already cached, it won't trigger
...
};

// right:
var image = new Image();
image.onload = function() { // always fires the event.
...
};
image.src = 'image.jpg';

this is just as a clue, mootools ensures the correct order of insertion vs event assignment anyway - but that does not mean that IE8 has no other similar issues to do with events.

Answer 2

I have tried to implement this using the two methods described. Neither seem to work in IE8 or IE8 with compatibility mode.

var path = this.options.assetBasePath + 'disk.png';
var _this = this;
var icon = new Asset.image(path, {
                          /*onload: function() {
                    this.set({
                    title: _this.language.download,
                    events: {click: function() {
                                           alert('test');
                    }
                 }
            }).inject(el, 'top');
              }*/
       });
icon.set({title: _this.language.download,
     events: {click: function() {
                 alert('test');
                 }
         }
});
icon.inject(el, 'top');
icon.addClass('browser-icon');
icons.push(icon);

Both of these methods display an alert() just fine in FF but fail in IE.