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>

我创建了一个小提琴HERE

基本上，任何想法如何使实际元素this成为回调函数中的this元素？

此外，我不想使用.live()或.delegate()，因为它们已被折旧。

修改

我想尝试这样做的原因是因为我试图绑定DOM中可能尚不存在的元素，IE我可以这样做：

(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()已被折旧，所以我不想使用它。

更新了小提琴HERE

澄清未来参考

由于给出了（正确的）答案，因此发现问题实际上是我将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();

更新了小提琴here

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

jQuery .on（）委托和'this'值

2 个答案: