我有一个脚本,它遇到了一些问题:
(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/