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

Question

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

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

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

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

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

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

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

试试这个 (View demo)

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

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