1

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?

BrendonKoz
  • 463
  • 1
  • 6
  • 18

2 Answers2

2

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

code90
  • 718
  • 9
  • 22
  • Although it very much appears as though this would work, I'd rather not add dependencies to my plugins. However, I am able to look at the source of the plugin and will be able to formulate a dynamic solution from that. Since your link led me to the solution, I'll give you credit for the answer. Thanks, code90! – BrendonKoz Nov 12 '10 at 22:14
  • This link is broken. Also the plugin won't work with modern versions of jQuery (1.8+) since the events are stored differently, unless it's been updated. – Sam Kauffman Mar 17 '15 at 16:19
0

Try this (View demo)

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

    $('.object2').click($('.object1').data('events').click[0]);
});
Ed I
  • 7,008
  • 3
  • 41
  • 50
  • The problem is that I'd like to make sure that this new plugin can take all functionality, regardless of situation. If there was a mouseout event, this would not be a dynamic enough of a solution. I had thought of that (should have mentioned it in my original post, sorry), but it just doesn't cover enough possibilities. – BrendonKoz Nov 12 '10 at 22:06
  • This code won't work with new versions of jQuery (1.8+) because the way events are stored was changed. Here's a snippet that will work in modern versions, and it handles all event types, not just click. http://stackoverflow.com/a/29151280/2180479 – Sam Kauffman Mar 28 '15 at 15:40