jQuery.on(）委派和'这'价值

jQuery .on() delegating and the 'this' value

本文关键字：价值 on 委派 jQuery      更新时间：2023-09-26

我有一个脚本，它遇到了一些问题：

(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()，因为它们已经折旧。

编辑：

我之所以尝试这样做，是因为我试图绑定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()已经贬值了，所以我尽量不使用它

更新fiddle 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

你在找这样的东西吗？

$.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();

此处更新了fiddle

编辑：我想我理解你的问题。代码在FF中似乎可以正常工作，但在IE中却不行。.on中的第二个参数是选择器，当您使用this对象时（至少在IE中），它就不能正常工作。

尝试使用$(this).selector而不是this。见下文，

更新演示

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

行为是正确的，函数内的this对象是document对象，因为鼠标事件绑定了document对象。但是，如果您想要div元素，则需要使用e.target

DEMO

相关文章：