logo标签列表

jQuery 插件中的点击事件不正常工作

javascriptjqueryjquery-pluginsclick
5

我正在编写一个jQuery插件，但是遇到了一个问题：

我的HTML元素

<a id="trac"></a>

我的JavaScript调用插件的代码

$('#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对象。

我该如何解决呢？

谢谢！

1
你的插件在被调用前已经加载了吗？并且你是否在$('#trac').myplugin();周围使用了document.ready()？ - powtac
你想让插件做什么？为什么要使用“.live()”？ - Pointy
是的，它在 document.ready() 中加载。 - Frias
当我看到“each”中的“live”以及你为什么这样做时，我停下来反思了一下，因为“live”通常不会像那样被多次应用。 - Mark Schultheiss
2个回答
8

“.live()”函数需要一个选择器，在你的插件中没有给它一个。你构建的jQuery对象（$(this)）是一个有效的对象，但没有涉及到选择器字符串。

你可以直接绑定处理程序：

  $root.click(function() { ... });

进一步解释一下：你说，“因为$root和$('#trac')完全相同。” 问题在于这并不完全正确。当你使用选择器字符串构建jQuery对象时，该对象会保留该选择器字符串。但是，当你从“$(this)”构建“$root”时，没有字符串存在。".live()"函数的操作是在<body>元素上创建一个处理程序，然后将每个冒泡事件的目标与该选择器进行测试。

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"获取了选择器，然后您可以附加"live click" - 而不需要使用.each的复杂性 - 如果按照您的方式进行（当然，选择器是固定的），则会在多个元素上多次放置事件，这是您示例中.each所暗示的。
jQuery.fn.newMethod = function(){
    return this.each(function(){
        alert(typeof this);
    });
};

在内部函数（alert中）中引用this关键字将指向当前的HTML元素。由于它不是jQuery对象，因此无法访问jQuery方法（尽管您可以将其包装在jQuery对象中以获取这些方法，如jQuery(this)）。

jQuery.fn.newMethod = function(){
    return this.each(function(){
        jQuery(this).css({'background-color':'red'});//each inner element
    });
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接