Question

我正在编写一个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对象。

我该如何解决？

谢谢！

Answer 1

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

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

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

详细说明：你说，“因为$ root和$（'#trac'）是完全一样的。”问题是，事实并非如此。使用选择器字符串构建jQuery对象时，该对象会保留该选择器字符串。从“$（this）”构建“$ root”时没有字符串。 “.live（）”函数通过在<body>元素上创建一个处理程序，然后测试针对该选择器冒泡的每个事件的目标来运行。

Answer 2

我喜欢另一个答案作为问题的“直接”答案，但为了显示你正在为别人做的事情，我认为你可以简化插件：

<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
    });
};

Click事件在jQuery插件中无法正常工作

2 个答案: