Как обработчики событий могут быть динамически перемещены в другой элемент с помощью 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

Попробуйте это ( Посмотреть демо )

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

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