如何使用 jQuery 将事件处理程序动态移动到不同的元素？

Question

jQuery 插件使代码更加可重用。

我之前制作了一个插件，可以打开动态创建的灯箱，从 IMG 标签的属性中提取信息。该插件为图像注册了一个单击事件处理程序。

我最近制作了另一个插件，我想在这些图像上使用它来动态添加叠加层。我遇到的问题是覆盖层完美地完成了它的工作，完全覆盖了图像（并覆盖了在图像上运行单击事件的能力）。

我一直在尝试找到一种方法将事件处理程序从 IMG 复制到新的覆盖层。我发现以下信息给了我一些见解：http: //ejohn.org/apps/workshop/adv-talk/#9

使用上面的代码，我能够检索分配给特定 IMG 元素的数据“events”属性的事件，并将其分配给叠加层元素的数据“事件”属性。不幸的是，似乎就复制而言 - 单击覆盖元素时不会触发该事件。

示例代码（无覆盖，此代码仅用于示例目的）：

HTML：

<div class="object1">This is the first object.</div>
<div class="object2">This is the 2nd object.</div>

JavaScript：

$(document).ready(function(){
    $('.object1').click(function(){
        alert('I was clicked.');
    });

    //using 2 params in data() uses a key/value pair
    $('.object2').data('events', $('.object1').data('events'));
    //still no "click" event handler on '.object2', ...
    // ... although the information is stored on the element's data store
});

我希望事件本身也能被注册，但情况似乎并非如此。有办法做到这一点吗？

Answer 1

我刚刚想出了这个插件。看起来它做了你想做的事情。
http://plugins.jquery.com/project/copyEvents

Answer 2

试试这个（查看演示）

$(document).ready(function(){
    $('.object1').click(function(){
        alert('I was clicked.');
    });

    $('.object2').click($('.object1').data('events').click[0]);
});