Question

There are 10 li elements and 5 of those have a element inside. And I’d like to add an event on the li elements using Mootools.

A class has few variables and method including the event for the li elements and my problem comes from here. please see the event for li below,

li.addEvents({
    mouseover: function(e){
        console.log(this.id + ' / ' + this.classVar);
    }.bind(this)
});

In the event I need to refer li itself and a class variable because each li has unique id and the classVar has also information. But problem is if I use bind(this) to the event, this.id won’t work or if not using it, *this.classVar’ won’t work.

If I use e.target.id instead of this.id, it returns correct id IF ONLY the li doesn’t have a element. Otherwise e.target refers the a element.

Can anyone help me on this please? Many thanks in advance

Answer 1

The simplest way is to use the self or me workaround, like so…

function myClass()
{
    var self = this;
    this.classVar = 'foo';

    // some other code

    li.addEvents({
        mouseover: function(e){
            console.log(this.id + ' / ' + self.classVar);
        }
    });
}