Question

I have a script and it has run into some problems:

(function($) {
    $.fn.extend({
        iH: function() {
            $(document).on('mouseenter', this, function(e) {
                alert('this is the element');
            })
        }
    })
})(jQuery);​

then in the body:

$(function(){
    $('.elem').iH();
});

<div class="elem">element</div>

I have created a fiddle HERE

Basically, any ideas how to make the actual element this be the this element in the callback function?

Also, I do not want to use .live() or .delegate() as they have been depreciated.

EDIT:

The reason I wam trying to do this is because I am trying to bind elements that might not already exist in the DOM, IE I could do this:

(function($) {
    $.fn.extend({
        iH: function() {
            $(this).on('mouseenter', function(e) {
                alert('this is the element');
            })
            $(this).live('mouseenter', function(e) {
                alert('Depreciated LIVE function');
            })
        }
    })
})(jQuery);​

however it would not trigger for any elements that are added after the event is bound, but .live() would trigger it:

$('body').append($('<div />').addClass('elem').html('content'));
$('.elem').iH();
$('body').append($('<div />').addClass('elem').html('content'));

Like I said, .live() has been depreciated so I am trying not to use it.

updated fiddle HERE

CLARIFICATION FOR FUTURE REFERENCE

Since the (correct) answer was given, it transpired that the problem was in fact that I was passing a jQuery object to the function. Upon further investigation I discovered that you could, indeed, use the this variable inside the function to point to the affected element(s):

$.fn.extend({
    iH: function() {
        $(document).on('mouseenter', this.selector, function(e) {
            alert($(this).html());
        });
    }
})

$('.elem').iH();
$('body').append('<div class="elem">Value</div>')​

Demo: jsFiddle #3

Answer 1

Edit: I think I understood your problem. The code seems to work fine in FF but not in IE. The second argument in .on is a selector and it is not working fine when you use this object(at least in IE).

Try using $(this).selector instead of this. See below,

Updated DEMO

$.fn.extend({
    iH: function() {
        $(document).on('mouseenter', $(this).selector, function(e) {
            alert(e.target.className);
        });
    }
})

$('.elem').iH();

---

The behavior is correct and this object inside the function is the document object, because the mouse event is bound the document object. However if you want the div element, then you need to use e.target

DEMO