jQuery .on () делегирование и значение this

Question

У меня есть скрипт, и он столкнулся с некоторыми проблемами:

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

тогда в теле:

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

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

Я создал скрипку ЗДЕСЬ

В принципе, есть идеи, как сделать фактический элемент this элементом this в функции обратного вызова?

Кроме того, я не хочу использовать .live() или .delegate(), поскольку они устарели.

EDIT:

Причина, по которой я пытаюсь это сделать, заключается в том, что я пытаюсь связать элементы, которые, возможно, еще не существуют в DOM, т.е. я могу сделать это:

(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);​

однако он не сработает ни для каких элементов, добавленных после привязки события, но .live() сработает:

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

Как я уже сказал, .live() устарел, поэтому я стараюсь его не использовать.

обновленная скрипка ЗДЕСЬ

РАЗЪЯСНЕНИЕ НА БУДУЩУЮ ССЫЛКУ

Поскольку был дан (правильный) ответ, выяснилось, что проблема была в том, что я передавал объект jQuery функции. После дальнейшего изучения я обнаружил, что вы действительно можете использовать переменную this внутри функции, чтобы указать на затронутый элемент (ы):

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

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

Демонстрация: jsFiddle # 3

Answer 1

Вы ищете что-то подобное?

$.fn.extend({
  iH: function() {
    var $this = $(this);
    $(document).on('mouseenter', $(this).selector, function(e) {
      var $el = $(this);
      alert('this is the element: ' + $el.html());
    })
  }
});

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

Обновленная скрипка здесь

Answer 2

Редактировать: Кажется, я понял вашу проблему.Код, кажется, хорошо работает в FF, но не в IE.Второй аргумент в .on является селектором, и он не работает нормально при использовании объекта this (по крайней мере, в IE).

Попробуйте использовать $(this).selector вместо this.См. Ниже,

Обновлено DEMO

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

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

---

Поведение является правильным, и this объект внутри функции является document объект, потому что событие мыши связано с document объектом.Однако, если вам нужен элемент div, вам нужно использовать e.target

DEMO