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: 406
        
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