Question

jQuery插件使代码更具可重用性。

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

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

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

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

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

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

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

2 个答案: