javascript - jQuery .on() 委托(delegate)和 'this' 值

标签 javascript jquery jquery-plugins

我有一个脚本,它遇到了一些问题:

(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>

我创建了一个 fiddle HERE

基本上,有什么想法如何使实际元素 this 成为回调函数中的 this 元素吗?

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

编辑:

我尝试这样做的原因是因为我试图绑定(bind) 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);​

但是,它不会触发事件绑定(bind)后添加的任何元素,但 .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 here

关于javascript - jQuery .on() 委托(delegate)和 'this' 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9692754/

相关文章:

javascript - 为什么 console.table 不显示最后一个条目

javascript - 选择特定的 CSS 文件以根据先前的选择为不同的访问者启用不同的主题

javascript - ajax在wp前端

javascript - 如何在 jAM 页面之间存储变量?

jquery - 如何使用 jQuery 打印页面的一部分?

jquery - 垂直和水平选项中的可滚动 HTML 表格

用于单选按钮检查的 JavaScript if 语句

jQuery:表单操作的切换按钮问题

javascript - 加载图像预览的脚本不起作用

jquery - 如何更改 jQuery 自动完成插件默认查询字符串键? (我想要的术语)