jQuery Forum

You can try the following code for this (only testet with firefox).
(function($){
    var contains = document.compareDocumentPosition ? function(a, b){
        return a.compareDocumentPosition(b) & 16;
    } : function(a, b){
        return a !== b && (a.contains ? a.contains(b) : true);
    },
    oldLive = $.fn.live,
    oldDie = $.fn.die;
    function createEnterOutFn(fn){
        return jQuery.event.proxy(fn, function(e) {
                if( contains(e.relatedTarget, this) ){
                    e.type = (e.type == 'mouseover') ? 'mouseenter' : 'mouseleave';
                    //console.log('e')
                    fn.apply(this, arguments);
                }
            });
    }
    $.fn.live = function(type, fn){
        if(/mouseenter|mouseleave/.test(type)){
            console.log('d')
            fn = createEnterOutFn(fn);
            if(type == 'mouseenter'){
                type = 'mouseover';
            } else {
                type = 'mouseout';
            }
        }
        oldLive.call(this, type, fn);
    };
    $.fn.die = function(type, fn){
        if(/mouseenter|mouseleave/.test(t.type)){
            if(type == 'mouseenter'){
                type = 'mouseover';
            } else {
                type = 'mouseout';
            }
        }
        oldDie.call(this, type, fn);
    };
})(jQuery);
you can use it like the normal live/die-methods:
$('a').live('mouseenter', function(e){
    console.log(e.type)
});
$('a').live('mouseleave', function(e){
    console.log(e.type)
});
but i would call it a plugin:

Thank you!
I'll have a go when I get home later today and let you know how it
works out. At the very least you've given me a very big starting
block, and perhaps this will end up in the jQuery core!

Hello,
I made some changes to the script:
(function($){
    var contains = document.compareDocumentPosition ? function(a, b){
        return a.compareDocumentPosition(b) & 16;
    } : function(a, b){
        return a !== b && (a.contains ? a.contains(b) : true);
    },
    oldLive = $.fn.live,
    oldDie = $.fn.die;
    function createEnterLeaveFn(fn, type){
        return jQuery.event.proxy(fn, function(e) {
                if( this !== e.relatedTarget && !contains(this, e.relatedTarget) )
{
                    e.type = type;
                    fn.apply(this, arguments);
                }
            });
    }
    function createBubbleFn(fn, type){
        return jQuery.event.proxy(fn, function(e) {
                var parent = this.parentNode;
                fn.apply(this, arguments);
                if( parent ){
                    e.type = type;
                    $(parent).trigger(e);
                }
            });
    }
    var enterLeaveTypes = {
        mouseenter: 'mouseover',
        mouseleave: 'mouseout'
    };
    $.fn.live = function(types, fn, bubble){
        var that = this;
        $.each(types.split(' '), function(i, type){
            var proxy = fn;
            if(bubble){
                proxy = createBubbleFn(proxy, enterLeaveTypes[type] || type);
            }
            if(enterLeaveTypes[type]){
                proxy = createEnterLeaveFn(proxy, type);
                type = enterLeaveTypes[type];
            }
            oldLive.call(that, type, proxy);
        });
    };
    $.fn.die = function(type, fn){
        if(/mouseenter|mouseleave/.test(t.type)){
            if(type == 'mouseenter'){
                type = 'mouseover';
            } else {
                type = 'mouseout';
            }
        }
        oldDie.call(this, type, fn);
    };
})(jQuery);
Now You can enable bubbling, too.
Example:
var add = function(){
            $(this).addClass('over');
        },
    remove = function(){
            $(this).removeClass('over');
        }
    ;
$('ul.nav').each(function(){
    //no bubble
    $('> li', this)
        .live('mouseenter', add)
        .live('mouseleave', remove);
    //bubbles
    $('li li', this)
        .live('mouseenter', add, true)
        .live('mouseleave', remove, true);
});
regards
alex

I would have thought you could do it with $('.selector').live
('mousrover', myMouseOverFunc).live ('mouseout', myMouseOutFunc);

@Gordon
mouseover and mouseenter is not the same. mouseover bubbles mouseenter
not. This means with mouseover/mouseout your handler will be called
everytime you mouseover/mouseout a descendant element. With mouseenter
your eventhandler is pnly called, if the mouse enters your element.
This is the problem, why you need to handle this special with live-
event. To get this work you have to use mouseover to simulate
mouseenter...
regards
alex
btw: using mouseenter/mouseover/mouseleave/mouseout-events with live
can add a lot overhead to your app. I don´t think, that you should use
this unthought. But it will make much sense with the upcomming feature
to bind the listener to another context than document in jquery 1.3.3.

Hello,
i forgot to return the jQuery-object in my live-/die- replacement. So
please add ' return this; ' to the last line of each-methods.
regards
alex