Question

jQuery plugins make code much more reusable.

I previously made a plugin that would open a dynamically created lightbox that pulled information from an IMG tag’s attributes. This plugin registered a click event handler for the image.

I recently made another plugin that I had wanted to use on these images to dynamically add an overlay. The problem I’m having is that the overlay does its job perfectly, completely overlaying the image (and covering the ability to run the click event on the image).

I’ve been trying to find a way to copy the event handler from the IMG to the new overlay. I found the following information which gave me some insight: http://ejohn.org/apps/workshop/adv-talk/#9

Using the code above, I was able to retrieve the events assigned to the specific IMG element’s data “events” property, and assign it to the overlay element’s data “events” property. Unfortunately, it seems that is as far as the duplication goes – the event is not fired when the overlay element is clicked.

Example code (no overlay, this code is just for example purposes):

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

I was hoping that the event itself would also be registered, but this doesn’t seem to be the case. Is there a way to do this?

Answer 1

I just came up with this plugin. Seems like it does what you intend to do.
http://plugins.jquery.com/project/copyEvents