Click事件不会在jQuery插件正常工作

我正在写一个jQuery插件，但我有一个问题：Click事件不会在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'); 
     }); 
    }); 
}

发生“从这里”永远不会显示。但如果我使用...

$('#trac').live('click',function(){ 
    console.log('here'); 
});

... “这里” 显示。我不明白为什么会这样，因为$ root和$（'＃trac'）是完全相同的jQuery对象。

我该如何解决？

谢谢！

来源

2011-06-20 Luiz Fernando

之前你的插件加载它被调用，你使用'document.ready（）'arround'$（'#trac'）。myplugin（）;'？ – powtac

你想要插件做什么？你为什么使用“.live（）” ？ – Pointy

是的，它被加载到一个document.ready（）中 –

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

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

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

要说明一下：你说的， “......因为$根$（ '＃TRAC'）是完全一样的。”问题是，这不是真的。当你用一个选择器字符串构建一个jQuery对象时，该对象会保持该选择器字符串。从“$（this）”构建“$ root”时没有字符串。 “.live（）”函数通过在<body>元素上创建一个处理程序，然后测试每个遇到该选择器的事件的目标进行操作。

来源

2011-06-20 12:48:41 Pointy

很好的答案！非常感谢！ –

我也喜欢这个答案。 –

我喜欢对方的回答是“直接”的答案，但问题表现出一定的替代，以你为别人做什么，我觉得你可以simplfy插件为：如本

<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的复杂性 - 如果按照您的方式进行操作（当然选择器固定）如果它有几个，它会多次将这个事件放在元素上 - 这是你的例子中所包含的。

jQuery.fn.newMethod = function(){ 
    return this.each(function(){ 
     alert(typeof this); 
    }); 
};

在内部函数内（在警报中）引用this关键字是指当前的HTML元素。因为它不是一个jQuery对象将无法获得jQuery的方法（虽然，你可以在jQuery对象包装它让这些方法早在jQuery的（这一点）。

jQuery.fn.newMethod = function(){ 
    return this.each(function(){ 
     jQuery(this).css({'background-color':'red'});//each inner element 
    }); 
};

来源

2011-06-20 13:26:54

Click事件不会在jQuery插件正常工作

回答

相关问题