如何克隆 jQuery Listen 插件事件？答案

【问题标题】：How to clone a jQuery Listen plugin event?如何克隆 jQuery Listen 插件事件？
【发布时间】：2010-09-26 07:10:57
【问题描述】：

我的页面上有一些<tr> 元素，其中一个click() 事件附加到位于每个元素内部的图像上。我用这个代码

$(this).clone(true).appendTo("table#foo");

执行以下操作：

所有这些都可以正常工作。现在我为<tr>s 添加了一个jQuery Listen 事件，这样用户就不必精确瞄准：他/她可以点击<tr> 上的任意位置，我可以将点击传递给图像。

代码如下：

$('tr.record').listen('click','td',function(){
  $(this).parent().find("img.clickable").click();
});

listen() 事件在原始项目上工作正常，但在克隆项目上，listen() 事件失败。图像的点击事件仍然正常工作。

这是 Firebug 告诉我的：

m(this, e.type) is undefined

...它引用 jquery.listen-1.0.3-min.js 的第 9 行。

如何使 listen() 事件作用于克隆的元素？

更新

默认情况下，jQuery 不会复制克隆元素上的事件，但 this plugin 会这样做。

同时，listen() 插件的作者提出了不同的策略 - 请参阅下面的答案。

【问题讨论】：

【解决方案1】：

listen() 插件的创建者 Ariel Flesler 通过电子邮件给了我这个建议：

“我认为这可以通过另一种方式解决。听的想法（和事件委托）实际上是为了避免所有的事件复制新元素。”

“你可以这样做：”

$('table#foo').listen('click','td',function(){
 $(this).parent().find("img.clickable").click();
});

“甚至：”

$.listen('click','td',function(){
 $(this).parent().find("img.clickable").click();
});

"第一个示例将使用表作为侦听器。在第二个示例中，使用<html> 标签。因此，无论您是否添加新的 td/tr/tables。它会还在工作。”

【讨论】：