Why are custom events not working for me? (Mootools)

Posted by John McCollum on Stack Overflow See other posts from Stack Overflow or by John McCollum
Published on 2010-04-25T16:32:48Z Indexed on 2010/04/25 16:33 UTC
Read the original article Hit count: 359

I've been learning Mootools, but I'm having problems firing custom events. I'm sure it must be something simple, but I can't see it for the life of me.

I wrote a simple class to nudge some list items using Fx.Tween. It works perfectly, except that the custom events aren't being triggered, no matter what I try.

<script type="text/javascript">
    var Pusher = new Class({
        Implements: [Events,Options],
        options: {
            elements: []
        },

        initialize: function(options){
            this.setOptions(options);
            this.attachListeners(this.options.elements);
        },

        attachListeners: function(elements){
            $$(elements).each(function(el){
                $(el).addEvent('mouseover', this.pushIn.bind(el))
                     .addEvent('mouseout', this.pushOut.bind(el));
            }, this);
        },

        pushIn: function(){
            this.fireEvent('in');
            this.set('tween', {duration: 'short'});
            this.tween('paddingLeft', '50px');
        },

        pushOut: function(){
            this.fireEvent('out');
            this.set('tween', {duration: 'short'});
            this.tween('paddingLeft', '0px');            
        }
    });

    window.addEvent('domready', function(){
        var p = new Pusher({
            elements: $$('li')
        });
        p.addEvent('in', function(){ alert('in'); });
        p.addEvent('out', function(){ alert('out'); });
    });
</script>

And in the HTML:

<ul id="mylist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

I've also tried the following:

window.addEvent('domready', function(){
    var p = new Pusher({
        elements: $$('li'),
        onIn: function(){ alert('in'); },
        onOut: function(){ alert('out'); }
    });
});

What am I doing wrong?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about mootools