我正在编写一个jQuery插件,但我遇到了问题:
我的HTML元素
<a id="trac"></a>
我的JS调用插件
$('#trac').myplugin();
我的插件
$.fn.myplugin = function(){
var $root;
return this.each(function(){
$root = $(this);
$root.live('click',function(){
console.log('here');
});
});
}
碰巧“here”永远不会显示。 但是,如果我使用......
$('#trac').live('click',function(){
console.log('here');
});
...显示“此处”。 我不明白为什么会这样,因为$ root和$('#trac')是完全相同的jQuery对象。
我该如何解决?
谢谢!
答案 0 :(得分:8)
“。live()”函数需要一个选择器,在你的插件中你不会给它一个。您构建的jQuery对象($(this)
)是一个有效的对象,但不涉及选择器字符串。
您可以直接绑定处理程序:
$root.click(function() { ... });
详细说明:你说,“因为$ root和$('#trac')是完全一样的。”问题是,事实并非如此。使用选择器字符串构建jQuery对象时,该对象会保留该选择器字符串。从“$(this)”构建“$ root”时没有字符串。 “.live()”函数通过在<body>
元素上创建一个处理程序,然后测试针对该选择器冒泡的每个事件的目标来运行。
答案 1 :(得分:0)
我喜欢另一个答案作为问题的“直接”答案,但为了显示你正在为别人做的事情,我认为你可以简化插件:
<div id="mystuff">hi</div>
<div id='answer'>empty</div>
$.fn.myplugin = function() {
this.live('click', function() {
$('#answer').text('here');
});
}
$('#mystuff').myplugin();
如下例所示:http://jsfiddle.net/FgUEB/,因此“this”获取选择器,然后您可以附加“实时点击” - 没有.each的复杂性 - 如果您这样做的话你拥有它(当然选择器固定)如果它有几个,它会多次将事件放在元素上 - 这是你的例子中的.each所暗示的。
jQuery.fn.newMethod = function(){
return this.each(function(){
alert(typeof this);
});
};
在内部函数(在警报中)引用此关键字是指当前的HTML元素。由于它不是jQuery对象,因此无法访问jQuery方法(尽管如此,您可以将其包装在jQuery对象中以将这些方法作为jQuery(this)返回。
jQuery.fn.newMethod = function(){
return this.each(function(){
jQuery(this).css({'background-color':'red'});//each inner element
});
};